fullpage.js - 在mobile上设置responsiveWidth和scrollOverflow中断页面

Question

CONTEXT

我在网页上使用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样式的方法。