简介
随着移动互联网的发展，越来越多的网站和应用需要在移动端提供更好的用户体验。其中，滚动页面时的体验是必不可少的。但是，手机浏览器在滚动时会经常出现页面晃动、弹跳等问题，影响用户的使用感受。
为此，@zeix 在 npm 上开源了一个名为 @zeix/body-scroll-lock 的 npm 包，可以帮助实现在移动端下，当出现弹窗等需要滚动并且阻止背景滚动的场景下，能够防止背景出现滚动的问题。
安装
首先，我们需要在项目中引入该包。可以通过 npm 安装：
npm install @zeix/body-scroll-lock --save
使用
之后，在需要使用滚动锁定的场景下，我们需要引入该包，并手动实例化一个滚动锁定的变量：
import bodyScrollLock from '@zeix/body-scroll-lock';
// ...
// Example
const targetElement = document.querySelector('#dialogElement');
bodyScrollLock.disableBodyScroll(targetElement);该变量保存了一个背景滚动锁定的状态，并会自动处理 touch 事件、键盘等操作。
需要注意的是，该包仅仅提供了实现锁定功能的方法，并不会在页面中自动应用。
示例
接下来，我们可以用示例代码来更好地理解该函数的实现方法，在锁定背景滚动时提供更好的用户感受。例如：
-- -------------------- ---- -------
---- -------------------
-------------
------------------
------
---------------------
--------
------ -------------- ---- -------------------------
----- ------------- - -----------------------------------------
----- ------------- - ---------------------------------
--------------------------------------- -- -- -
-- ---- ------ -------
--------------------------- - --------
-- ------- ---- ------
------------------------------------------------
---
--------------------------------------- -- -- -
-- ---- ------ -------
--------------------------- - -------
-- ------ ---- ------
-----------------------------------------------
---
---------在上述代码中，我们首先需要找到弹出窗口的 DOM 元素以及触发弹窗的按钮。之后，我们在按钮的点击事件中通过调用 @zeix/body-scroll-lock 中的 disableBodyScroll 方法锁住背景，并通过设置目标元素的 display 样式来展示弹窗。最后，当用户重置界面时，我们通过再次调用该函数的 enableBodyScroll 方法来恢复背景滚动。
总结
@zeix/body-scroll-lock npm 包是一个非常实用的移动端前端库，提供了非常方便的前端滚动锁定功能。在用户体验的提升与交互设计的优化中有着重要作用。需要注意的是，在实际使用时，需要根据具体要求来选择使用 @zeix/body-scroll-lock 包或者其他的前端库。
此文介绍了该包的安装与使用方法，以示例代码解释了其具体应用。希望对大家在移动端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7a238a385564ab69c4