SmooScroll——轻量页面平滑滚动JS
非常喜欢页面平滑滚动，或者说滚动阻尼感的我，之前在其他网站上部署了lenis。虽然lenis是一个非常好用的开源平滑滚动库，但是它的效果仍然不够让我满意，我希望能够有GSAP ScrollSmoother那样，原生滚动条与页面滚动脱耦的效果。然而当时GSAP的ScrollSmoother是付费会员插件，需要一年150美元的会员……在国内国外的网络上又找不到效果类似的替代品，刚刚开始学习JavaScript的我，就这样决定自己做一个平替平滑滚动JS，于是——SmooScroll诞生了。
当然，在我折腾出能够正常使用的SmooScroll以后，也有一件令我啼笑皆非的事情发生了——GSAP宣布全面免费，包括ScrollSmoother这样的插件。
我不想再去提写SmooScroll的心路历程，这篇文章就简单介绍一下SmooScroll这个JavaScript，虽然GSAP免费了，但是本博客仍然使用SmooScroll，SmooScroll的轻量化仍然还是有优势的。
SmooScroll简介
首先：
SmooScroll官网：https://smooscroll.shuninyu.fun/
GitHub仓库：https://github.com/ShuninYu/SmooScroll
那么，SmooScroll是什么呢？它能干什么？
以上内容均摘自SmooScroll的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这个名字，应该很容易就能看出这是把smooth和scroll两个词拼到了一起。因为smooth的尾音和scroll的起始音非常相似，所以读起来也非常的丝滑。
为什么本地部署？
如果你去看了SmooScroll的官网，还看了部署指南的话，你可能会发现，SmooScroll的部署方式只有CDN引入和本地引入两种方式，并且CDN引入还只支持auto-lite版本。npm呢？其他版本的CDN呢？
关于这两个问题，这个回答也很简单：
- 我自己都还没怎么了解npm是什么。
- 其实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宣布免费，它对我来说也是无可替代的。