什么是 no-scroll？
在移动端，当弹出层、侧边栏等组件显示在页面上时，我们通常会希望用户无法滚动页面，而是只能在组件内滚动。no-scroll 就是一个帮助我们实现这一功能的 npm 包。
如何使用 no-scroll？
安装 no-scroll
使用 npm 安装 no-scroll：
--- ------- --------- ------
引用 no-scroll
安装完成后，在需要使用 no-scroll 的模块中引入 no-scroll 包：
------ -------- ---- ------------
开启 no-scroll
在需要开启 no-scroll 的地方调用 noScroll.on() 方法：
--------------
关闭 no-scroll
在需要关闭 no-scroll 的地方调用 noScroll.off() 方法：
---------------
示例代码
------ -------- ---- ------------ -- ----------- -------- ----------- - -- ------ -------------- - -- ----------- -------- ------------ - -- ------ --------------- -
no-scroll 的实现原理
no-scroll 的实现原理是通过给 body 设置 overflow: hidden 样式来实现。在开启 no-scroll 时，no-scroll 会将 body 的 overflow 样式设置为 hidden，这样用户就无法通过滚动页面来滚动组件。在关闭 no-scroll 时，no-scroll 会将 body 的 overflow 样式设置为 auto，这样用户就可以通过滚动页面来滚动组件。
总结
no-scroll 是一个非常实用的 npm 包，能够帮助我们实现在移动端弹出层、侧边栏等组件出现时禁止页面滚动的功能。使用 no-scroll 需要注意，在开启 no-scroll 时要及时关闭，否则会影响用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/no-scroll