使用 fullpage.js 和 slim scroll.js 在幻灯片中滚动

Scrolling inside slides with fullpage.js and slim scroll.js

我在 Fullpage.js 中激活了选项 scrollOverflow: true。并添加了 slim scroll 插件。在移动设备上滚动更长的内容很重要。当我尝试在手机 phone 上滚动时,它只是直接滚动到其他部分?我在 phone 上测试了 Alvaro 制作的示例,效果非常好。它滚动内容,最后转到下一部分。

我哪里做错了? Website under construction

编辑 我找到了问题所在。我用来放置内容的容器对于大多数移动屏幕来说太长了,但对于一个长的可滚动容器来说还不够长。如此接近内容的末尾,它滑动到下一部分。我没有 js 错误,所以我不明白哪里出了问题。我在容器底部添加了一个填充物,使其更长并提供了想要的效果。

欢迎更好的选择

fullPage.js 很久以前就停止使用 slimScroll.js。 现在它使用一个分叉版本的 iScroll 解决了其中的一些错误。您可以在 vendors 文件夹中找到它,如 in the docs:

所述

scrollOverflow: (default false) defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor library scrolloverflow.min.js and it should be loaded before the fullPage.js plugin. For example:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>