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

【问题标题】：fullpage.js - setting responsiveWidth and scrollOverflow breaks page on mobilefullpage.js - 在移动设备上设置 responsiveWidth 和 scrollOverflow 中断页面
【发布时间】：2016-01-25 23:12:56
【问题描述】：

上下文

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

问题

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

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

【问题讨论】：

标签： javascript jquery css fullpage.js

【解决方案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 样式的方法。

【讨论】：

谢谢 - 只要我也给每个部分指定一个最小高度（否则某些部分会消失），这似乎效果很好。但是，在部分中打开幻灯片会将用户滚动回部分 1 - 有什么方法可以解决这个问题？
一个部分中的所有幻灯片必须具有相同的高度。
这已经解决了——剩下的唯一问题是当我滚动离开一个部分（禁用自动滚动）时，当我离开这个部分大约 30% 时，我的部分我留下更改幻灯片...知道是什么触发了这个吗？