使用jQuery插件viewScroller.js平滑全页滚动

JavaScript滚动效果已经存在多年,数十个优秀的图书馆可以从中挑选。但该领域的新竞争者是viewScroller.js

这个非常小但功能强大的库可以构建单页布局,通过滚动滚轮(或触摸板)滚动块作为块滚动。这创建了受控的布局,其中滚动将用户通过像素严格精度的页面的各个部分移动。

当然,这是一个完全免费的图书馆,可以在GitHub上使用,可以轻松安装Bower或npm

但是,viewScroller.js 不是独立的JavaScript库。它依赖于jQuery和两个特定的插件:jQuery MousewheeljQuery Easing。这些都需要使滚动效果正常工作。

这可能会妨碍viewScroller的价值,因为它需要几个JS库才能运行。但是,如果你已经在使用jQuery了,那么这是一个没有意思的事情。viewScroller.js提供了一种最简单的方法来使单页滚动网络应用程序运行时没有多少代码。

但是,它使用非常详细的类和ID来创建滚动效果。您可以在自己的CSS文件中编辑这些类,或者在基础代码中覆盖它们。您将在repo页面上找到一个包含类名默认设置数据完整列表

最简单的方法是通过克隆viewScroller演示。他们有一个右侧边栏,另一个有左边栏,一个有两个侧边栏,在中间夹着内容。

如果您可以使用jQuery加油的网络应用程序,那么viewScroller是一个非常棒的免费库。它确实需要相当多的依赖关系,但是不应该很难配置。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259308.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论