横向到纵向视图导致页面上出现空白空间

如何解决横向到纵向视图导致页面上出现空白空间

我在我的网站上遇到了这个空白空间问题，并注意到它是由 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}>
    )
  }
}