fullpage.js - 设置 responsiveWidth 和 scrollOverflow 在移动设备上中断页面

Question

上下文

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

问题

但是，设置这些选项似乎也会将整个页面向上移动一个半屏幕 - 即前 1.5 个屏幕的内容是不可见的，并且该页面仅从第 2 部分的中间开始。有没有人以前遇到过这个错误吗？

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

Answer 1

你不需要使用scrollOverflow，事实上，我一直建议人们不要使用它。那不是真正的响应式网站！

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

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

我使用了 class .fp-responsive，它是 state classes added to the body by fullpage.js 之一。它将在插件触发响应模式时添加，它提供了一种创建条件 CSS 样式的方法。