加载中……
孤灯从流
的博客
ShuninYu 's Blog

页内导航

Tags

SmooScroll——轻量页面平滑滚动JS

2025-5-8 - 11:56 | 最后更新:2025-5-16

非常喜欢页面平滑滚动,或者说滚动阻尼感的我,之前在其他网站上部署了lenis。虽然lenis是一个非常好用的开源平滑滚动库,但是它的效果仍然不够让我满意,我希望能够有GSAP ScrollSmoother那样,原生滚动条与页面滚动脱耦的效果。然而当时GSAP的ScrollSmoother是付费会员插件,需要一年150美元的会员……在国内国外的网络上又找不到效果类似的替代品,于是刚刚开始学习JavaScript的我,决定自己做一个平滑滚动JS,于是——SmooScroll诞生了。

当然,在我折腾出能够正常使用的SmooScroll以后,也有一件令我啼笑皆非的事情发生了——GSAP宣布全面免费,包括ScrollSmoother这样的插件。
我不想再去提写SmooScroll的心路历程,这篇文章就简单介绍一下SmooScroll这个JavaScript,虽然GSAP免费了,但是本博客仍然使用SmooScroll。

SmooScroll简介

首先先把SmooScroll的官网列出来:
中国内地:https://smooscroll.shuninyu.fun/
GitHub Pages(内地访问可能加载失败):https://shuninyu.github.io/SmooScroll/

官网一开始只有GitHub Pages,并不是我懒得给它绑我的域名,主要是一旦我绑了我的域名,GitHub就会自动尝试保护我所有的子域名,这对我来说一点好处都没有,因为我域名下其他的网站都在自己的服务器上。后来发现内地有可能遇到加载问题,所以在内地的服务器上部署了镜像网站,并且把jsdeliver的资源替换成本地资源。
另外,SmooScroll的GitHub库,可以直接从官网找到链接,内容和footer都有,很好找到。

那么,SmooScroll是什么呢?它能干什么?

SmooScroll是一个免费开源、体积小、部署简单的平滑滚动JS,基于原生JavaScript所以不需要任何依赖(比如jQuery、Vue等等)。 SmooScroll的效果基于原生滚动条,不会屏蔽默认滚动条或创建假滚动条,同时包含非常简单就能使用的回到顶部按钮功能。

以上内容均摘自SmooScroll的GitHub README。当然,README也是我写的。

人话说就是:SmooScroll这个JavaScript,只要你把它引入你的HTML里,然后修改里面的几个参数,它就可以让你的页面有非常丝滑的滚动阻尼效果。
如果你用的是auto-lite版本的SmooScroll,你甚至只需要把它引入你的HTML就可以,连修改参数都不需要。

这么说确实比较笼统,实际上如果使用的是auto版本,那只需要修改一下JavaScript里的按钮图片路径,就不需要在做任何其他的修改了。而如果使用manual版本,就需要像GSAP ScrollSmoother一样手动创建容器,然后把需要滚动的内容包裹进容器内,不过这个“容器”说起来好听,实际上就是一个带有 class="smooth-content" 的div而已。
总而言之,SmooScroll部署起来确实很方便很简单,哪怕你对JavaScript一窍不通,也能够很轻松的使用SmooScroll。

SmooScroll的体积也很小,最大的auto版本也只不过2.72 KB的大小,就算你的服务器是3M小水管,加载SmooScroll也不费吹灰之力。

为什么本地部署?

如果你去看了SmooScroll的官网,还看了部署指南的话,你可能会发现,SmooScroll的部署方式只有CDN引入和本地引入两种方式,并且CDN引入还只支持auto-lite版本。npm呢?其他版本的CDN呢?

关于这两个问题,这个回答也很简单:1、我自己都还没怎么了解npm是什么。2、其实manual-lite版本也可以通过CDN引入,但是其他版本目前只能本地部署。

这里展开讲一下第二个回答。

首先,为什么 manual-lite 也可以通过CDN引入,但是官网和仓库README都没有给出CDN引入的链接呢?
因为我忘了 manual-lite 版也可以,直到我开始写这篇blog的时候我才想起来,之后更新SmooScroll的话会加上 manual-lite 版的CDN链接。其实如果你对jsdeliver熟悉的话,你自己就可以找出该版本的CDN链接。
虽然 auto-lite 和 manual-lite 都可以通过CDN引入,但我还是建议有条件的话仍然使用本地部署,具体原因马上会讲。

接着,为什么其他版本目前只能本地部署?因为SmooScroll非常轻量化,所以所有参数的修改都直接在JavaScript内部进行。说得更直白些就是 :修改参数都是直接修改SmooScroll的JavaScript,而不是在引用的地方单独再写一串代码。
SmooScroll的JS文件开头都有一个自定义参数的区域,修改参数其实很简单,当然这样也导致使用CDN引入就无法修改参数,这也是上面我为什么说建议使用本地部署。其实SmooScroll的默认参数效果已经很好了,但是有回到顶部按钮的版本是必须要输入按钮图片路径的,否则按钮就显示不出来,并且如果想要调整按钮的位置、大小等等参数的话,还是需要对JavaScript直接编辑。

我在用SmooScroll

虽然GSAP已经宣布免费,但是我的个人网站以及这个博客仍然使用SmooScroll。我的网站不需要臃肿的GSAP,所以对我来说SmooScroll仍然是最好的选择。
我直接把SmooScroll的auto-lite版集成在我博客的基础js文件里,这样我甚至都不需要去写引用,唯一需要修改的地方仍然只是SmooScroll本身。因为我的博客两侧的导航栏都是fixed元素,所以实际上用auto版本会让两侧的导航栏参与滚动,用manual需要手动添加容器并包裹内容,所以我直接修改SmooScroll的筛选策略,让auto版本的自动包裹不选择我两侧导航栏的元素。SmooScroll本身就是开源的,所以任何人都可以根据自己的需求来修改SmooScroll的源代码。
这样我只修改了一个文件,就给整个博客添加了平滑滚动的效果,并且还跟原有的回到顶部按钮兼容,这也是SmooScroll的优势之一。

当然,针对这种情况肯定还是能够直接在参数里添加规避类名更方便,这可能也是我未来更新SmooScroll的一个方向。不过目前对于SmooScroll的开发也暂时告一段落了,它的功能已经满足了我最开始的需求和我对它的期待,所以重心会暂时从这里移开。此外在使用SmooScroll的过程中也发现了一些可能需要特别说明的事情,之后也许会写一篇文档来列举这些说明。

对于SmooScroll,我其实是非常骄傲的,虽然它很简单、也不是什么无比强大的JS库,但是它确实满足了我的需求,即使GSAP宣布免费,它对我来说也是无可替代的。