滚动部分滚动溢出答案

【问题标题】：Scrollify section scroll with overflow滚动部分滚动溢出
【发布时间】：2016-10-06 16:34:20
【问题描述】：

我正在尝试使用脚本 Scrollify (https://github.com/lukehaas/Scrollify)，但我的部分比用户的屏幕长，这意味着您首先必须向下滚动才能看到该内容的内容。

但是，Scrollify 不会让这种情况发生，而是会立即滚动到新部分。

有没有办法修改 Scrollify 和/或使用另一个脚本来配合我想要它做的事情？

【问题讨论】：

你试过CSS属性overflow:scroll;
Scrollify 会覆盖 overflow:scroll 而是动画过渡到下一部分，所以恐怕它不是很有用。
您可以简单地在每个部分的底部添加一些填充/边距。
有没有人能解决这个问题？
我遇到了同样的问题，但还没有弄清楚。

标签： javascript jquery html scroll jquery-scrollify

【解决方案1】：

Scrollify 最近收到了一些更新，可以解决您一直遇到的问题。

Scrollify 现在有额外的选项、方法和回调，并且现在可以很好地与触控板、Apple Magic 鼠标和动态滚动配合使用。

【讨论】：

【解决方案2】：

您可以改用fullPage.js 轻松实现这一目标。如果您想保持滚动条与滚动条一样，只需使用选项scrollBar:true 来表示as in this example。

使用选项scrollOverflow:true 可以解决您的问题，如您所见in this example。

来自fullPage.js documentation：

scrollOverflow：（默认为 false）定义是否为该部分创建滚动，以防其内容大于其高度。设置为 true 时，您的内容将被插件包装。考虑在 afterRender 回调中使用委托或加载其他脚本。如果将其设置为 true，则需要供应商插件 jquery.slimscroll.min，并且应在 fullPage.js 插件之前加载。

另外，fullPage.js：

提供更多选项、方法和回调。
如果可能，它使用 css3 转换，这在平板电脑和手机中表现更好。
解决 Apple 笔记本电脑触控板、Apple 魔术鼠标和任何动态滚动的问题。
提供set of extensions

【讨论】：

@Erman 那是因为你做错了:) 以any example 作为基础文档并从它开始。
@Erman FullPage.js 将每个部分包装到 div 标签中，并应用了相当多的 CSS 魔法。在查看 Scrollify 演示中的 HTML/CSS 和 javascript 代码本身后，我的印象是：Scrollify 似乎要简单得多。我明天试试，然后回复你。
除非您使用verticalCentered:true 或overflowScroll:true，否则它不会包装任何内容。