60fps-scroll-element固定元素滚动优化
滚动区域不是 window 而是自定义容器？嗯，这种场景还挺常见的，是你页面里有一些绝对定位的元素，像弹窗或者浮层，结果一滚动就卡顿。60fps-scroll-element 就是干这个的，专门滚动性能优化的问题，尤其是在固定元素的场景里表现还不错。
它的做法挺简单粗暴的，监听目标元素的滚动事件，手动控制固定元素的位置，让它看起来像“滚”着走，其实是自己动。用法也直白：
require('60fps-scroll-element')(document.querySelector('.my-class'));这种思路适合你用 webpack 打包项目的时候，不用再跟 bower 较劲，而且代码不复杂，想自己魔改也好上手。滚动目标换成你自己的容器就行，灵活性挺高。
要注意的是，它不适合那种整页滚动的场景，更适合组件内局部滚动，比如自定义弹窗或者滚动列表。如果你正好遇到类似需求，可以试试。
你也可以看看相关技术点，像 JavaScript 实现滚动事件、ScrollReveal 这类库，思路有相通的地方。
文件大小：2.53KB
评论区