整页滚动插件（fullPage.js、scrollify.js 等）阻止默认的移动 Safari UI 行为

Posted 2023-03-14

【中文标题】整页滚动插件（fullPage.js、scrollify.js 等）阻止默认的移动 Safari UI 行为

【英文标题】：Full page scrolling plugins (fullPage.js, scrollify.js, etc) prevents default mobile Safari UI behavior

【发布时间】：2015-12-22 21:45:35

【问题描述】：

在 ios 设备上，Scrollify.js、FullPage.js 和 OnePage-Scroll.js 等滚动插件似乎将 Safari 的地址和导航栏保持在原位，而不是在用户滚动页面时它们通常最小化的方式。

有什么解决方法吗？我知道当这些 UI 栏最小化时，内部视口高度会发生变化，因此插件需要重新计算高度。此外，UI 在滚动事件期间最小化，这可能是滚动插件的问题？有没有办法在滚动事件完成时隐藏 UI？

当您将 iPhone 的方向从纵向更改为横向时，条形消失，但如果您通过点击顶部或底部将它们拉回来，它们会在您滚动时保持不变。

我真的很想拥有那个额外的高度！

【参考方案1】：

有什么解决方法吗？

您也可以在没有自动滚动的情况下使用它，但这可能不是您想要的：autoScrolling:false。

如果您担心横向模式，如果您避免使用锚点并且以纵向模式加载页面然后更改为横向，那么它根本不会显示顶部栏至少在 iOS 上强>。不是最好的解决方案，但它可能会有所帮助。

我个人建议您使用选项responsiveWidth 或responsiveHeight 来更改页面在小屏幕设备上的行为并删除自动滚动并可能有更大的部分。

一般来说，移动浏览器不允许访问顶栏或底栏的行为，并且没有太多开发人员可以用来处理它们。

【讨论】：

我不认为使用 scrollbar:true 对 UI 有任何影响。而且我设计页面的方式需要插件的自动滚动功能，即使在小屏幕上也是如此。我觉得这一定与插件如何阻止浏览器对触摸事件的默认响应有关。

对。 scrollBar:true 对 iOS 没有影响，这让我感到惊讶，因为它实际上是在滚动网站，但是很好。

如果您担心横向模式，如果您避免使用锚点并且以纵向模式加载页面然后更改为横向，则至少在iOS上根本不会显示顶部栏.不是最好的解决方案，但它可能会有所帮助。

不，除此之外没有其他适当的方法来处理这些条。浏览器用它做他们想做的事，我们没有太多的控制权。

是的，我注意到如果您将设备转为横向，UI 会消失，但是当用户点击屏幕顶部的导航菜单按钮时，他们会返回并原地不动.