问题描述
我在我的网站上遇到了这个空白空间问题,并注意到它是由 fullpage.js 引起的。我相信这个问题只发生在 Safari 上,我已经在 iPhone 6s 上测试过了。
重现:
- 查看 fullpage.js 网站时,将设备旋转到横向视图
- 然后旋转回纵向视图并注意屏幕底部的空白
我还注意到,如果您在地址栏附近点按,该部分似乎会滚动回原处。
有没有办法防止这种情况发生?
解决方法
使用触发 Fullpage API 的 afterResize
方法的回调将 reBuild
方法添加到您的 Fullpage.js 配置选项。在 vanilla JS 中,这看起来像这样:
new fullpage('#fullpage',{
afterResize() {
const fp = document.querySelector('#fullpage')
fp.fullpage_api.reBuild();
}
});
在 React 中,它看起来像这样:
class FullpageWrapper extends React.Component {
afterResize() {
this.fp.fullpageApi.reBuild();
}
render() {
return (
<ReactFullpage ref={el => this.fp = el}>
)
}
}