背景
在前端开发中，常常需要控制页面中某个元素的滚动而不影响整个页面的滚动。例如在移动端开发中，当弹出一个固定高度的模态框时，需要禁用页面背景的滚动，只允许模态框内部的内容进行滚动。这个需求可以通过 body-scroll-lock 这个 npm 包来实现。本文将详细讲解 body-scroll-lock 的使用方法。
安装
首先需要安装 body-scroll-lock 包，可以通过 npm 命令行进行安装：
npm install body-scroll-lock --save
原理
body-scroll-lock 包的原理是禁用 <html> 和 <body> 元素的滚动行为，并利用样式表模拟出滚动条并通过 JS 控制其位置从而实现在指定区域内的滚动而不影响整个页面的滚动。
使用
通过以下代码来导入 body-scroll-lock 包：
import bodyScrollLock from 'body-scroll-lock';
在需要控制滚动的区域中：
- 声明一个滚动容器元素，例如一个 元素；
- 将滚动容器元素的样式设置为固定高度，并加上 overflow-y: scroll 属性；
- 在需要进行滚动时，调用 bodyScrollLock 方法传入滚动容器元素，禁用页面的滚动。
示例代码如下：
<div id="my-scroll" style="height: 300px; overflow-y: scroll;">
<!-- 内容 -->
</div>
<script>
const scrollElement = document.getElementById('my-scroll');
bodyScrollLock.disableBodyScroll(scrollElement);
</script>当滚动容器元素打开，需要禁用页面背景的滚动时，可以使用以下代码来禁用页面背景的滚动
bodyScrollLock.lockBodyScroll(scrollElement);
当滚动容器元素关闭，需要解除禁用页面背景滚动时，可以使用以下代码来解锁
bodyScrollLock.unlockBodyScroll(scrollElement);
指导意义
在前端开发中，页面滚动是一个常见需求，但是由于各种端的兼容问题以及不同业务场景对页面滚动的需求在各方面都有所不同，因此需要有一个灵活且易用的滚动控制方案。而 body-scroll-lock 包提供了一种简便的解决方案，在实现页面滚动控制方面具有较高的效率和易用性。在实际项目开发中，可以根据具体业务场景来选择是否使用该包进行页面滚动控制。同时，在使用该包时，需要注意其原理以及引入方式，以保证页面滚动控制的正确性和流畅性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/body-scroll-lock