整页.js - 设置响应宽度和滚动溢出在移动设备上中断页面

fullpage.js - setting responsiveWidth and scrollOverflow breaks page on mobile

本文关键字：移动 中断 溢出 滚动 设置 js 响应 整页      更新时间：2023-09-26

上下文

我在页面上使用整页.js并希望在移动设备上禁用它，因为某些部分不适合移动设备上的单个屏幕（它们只是被切断）。我发现设置responsiveWidth: 1000和scrollOverflow: true具有预期的效果。

问题

但是，设置这些选项似乎也会将整个页面向上移动一个半屏幕 - 即前 1.5 个屏幕的内容是不可见的，并且页面仅在第 2 节的中间附近开始。以前有人经历过此错误吗？

我可能会看到这个有什么特别的原因吗？

你不需要用scrollOverflow，其实我总是建议人们不要用。这不是一个真正的响应式网站！

您可以使用"responsiveWidth"和"responsiveHeight"选项，然后通过执行以下操作强制该部分尽可能大：

.fp-responsive .fp-section,
.fp-responsive .fp-slide,
.fp-responsive .fp-tableCell{
    height: auto !important;
}

我使用了类.fp-responsive，它是通过整页.js添加到body的状态类之一。当插件触发响应模式时，它将添加它，并提供一种创建条件 CSS 样式的方法。

相关文章：