使用jQuery插件viewScroller.js进行平滑的整页滚动

但是，该领域的新竞争者是viewScroller.js 。

JavaScript滚动效果已经存在很多年了，这里有很多很棒的库可供选择。

这将创建一个受控的布局，在该布局中，滚动会以像素级精度将用户移动到页面的各个部分。

这个非常小巧但功能强大的库可以构建单页布局 ，只需滚动一下滚轮（或触摸板）即可将其滚动为块 。

自然，这是一个完全免费的库， 可以在GitHub上使用，并且可以通过Bower或npm轻松安装。

这两个都是使滚动效果正常工作所必需的 。

它确实依赖jQuery和两个特定的插件： jQuery Mousewheel和jQuery Easing 。

但是，viewScroller.js 不是独立JavaScript库 。

viewScroller.js提供了最简单的方法来使单页滚动Web应用程序运行而无需太多代码。

但是，无论如何，如果您已经在使用jQuery，那将是一件容易的事。

这可能会妨碍viewScroller的值，因为它仅需要一些JS库即可运行。

您可以在回购页面上找到完整的列表 ，其中包含类名和默认设置数据 。

您可以在自己CSS文件中编辑这些类 ，也可以在基本代码中覆盖它们 。

但是，它确实使用了非常详细的类和ID来创建滚动效果。

它们的一个带有右侧边栏，另一个带有左侧边栏，另一个带有两个中间栏，中间夹着内容。

最简单的开始方法是克隆viewScroller演示 。

它确实需要很多依赖关系，但是配置起来并不难。

如果您对使用jQuery的网络应用程序感到满意，那么viewScroller是一个很棒的免费库。

如果您喜欢UX和滚动行为，请按照GitHub上的设置指南开始。

观看现场演示 ，看看您的想法。

翻译自: https://www.hongkiat.com/blog/single-page-scrolling-viewscroller-js/