npm 包 on-scroll 使用教程

在 Web 前端开发中，经常需要对页面进行滚动处理。on-scroll 是一个可轻松实现滚动监听的 npm 包，解决了滚动监听的繁琐问题，能够让你更专注于业务代码的开发，而不用过于纠结如何监听滚动事件。

安装

npm install on-scroll --save

使用方式

导入 on-scroll

import onScroll from 'on-scroll'

或者使用 CommonJS 格式导入：

var onScroll = require('on-scroll')

添加滚动监听

onScroll.add(element, callback)

其中，element 可以是 DOM 元素或者 Window 对象，callback 是滚动事件回调函数。

示例：

onScroll.add(window, function() {
  console.log('Window scrolling!')
})

const element = document.getElementById('my-element')
onScroll.add(element, function() {
  console.log('Element scrolling!')
})

移除滚动监听

onScroll.remove(element, callback)

示例：

onScroll.remove(window, function() {
  console.log('Window scrolling!')
})

const element = document.getElementById('my-element')
onScroll.remove(element, function() {
  console.log('Element scrolling!')
})

深入了解

内部实现

on-scroll 通过惰性计算的方式优化了性能。在添加滚动监听时，on-scroll 并不会立即监听滚动事件，而是在真正需要时才添加事件监听器。例如，在页面上添加了一个滚动事件回调函数，但该事件没有被触发，页面没有滚动，此时 on-scroll 不会监听任何滚动事件。只有当页面开始滚动时，on-scroll 才会添加事件监听器。

目标元素

当添加滚动监听时，on-scroll 可以监听任何元素的滚动事件。但需要注意的是，如果你想监听某个元素的滚动事件，该元素必须已经设置了样式 overflow: scroll 或 overflow: auto。

结语

on-scroll 是一个非常方便且易于使用的 npm 包，能够有效的减少代码量，提高代码的可读性和维护性。同时，on-scroll 的实现也有一定的深度，有助于我们更进一步了解滚动事件的相关知识。

示例代码：https://codesandbox.io/s/on-scroll-example-l2w52

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8281e8991b448db3e8