javascript - 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;
}

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