在移动设备上，有些情况下我们需要禁止用户在拖动某个元素时滚动整个页面，比如在实现一些自定义的滑块、轮播图等交互组件时。本文将介绍几种方法来实现这个需求。
方法一：使用CSS样式
可以通过CSS样式来实现禁用页面的滚动行为。具体的实现是通过 overflow: hidden 将当前 <body> 标签的滚动条隐藏，然后再通过 position: fixed 将当前触摸的元素固定在屏幕上。这样就可以防止用户在滑动元素时滚动整个页面。
body {
overflow: hidden;
}
.my-element {
position: fixed;
}需要注意的是，由于 position: fixed 会改变元素的布局位置，因此可能需要对该元素进行进一步的调整。
方法二：使用JavaScript事件
除了CSS方式，还可以使用JavaScript来监听 touchstart 和 touchmove 事件。在开始触摸时，记录当前手指的位置，并在移动时计算手指的位移，从而判断是否需要阻止默认的滚动行为。
-- -------------------- ---- -------
--- -------
-------------------------------------------------------------------- --- -- -
------ - ---------------------
---
------------------------------------------------------------------- --- -- -
----- -------- - ---------------------
----- -------- - -------- - -------
-- ------------------- - --- -
-------------------
-
---在上述代码中，我们记录了触摸开始时的位置 startY，并在移动过程中计算当前手指的位置和位移 currentY 和 distance。当位移超过10个像素时，就阻止默认的滚动行为。
需要注意的是，由于移动设备的滚动事件是通过惯性实现的，因此这种方法可能会比较卡顿和不流畅。
方法三：使用第三方库
除了以上两种方式，还可以使用一些第三方库来简化操作。其中比较常用的是 body-scroll-lock 库，该库可以快速禁止页面滚动，并且支持多个触摸元素。
import bodyScrollLock from 'body-scroll-lock';
const targetElement = document.querySelector('.my-element');
bodyScrollLock.disableBodyScroll(targetElement);在上述代码中，我们引入了 body-scroll-lock 库，并调用 disableBodyScroll() 函数将目标元素添加到锁定列表中。
需要注意的是，使用第三方库可能会增加项目体积和加载时间，而且可能存在兼容性问题。
结论
以上介绍了三种禁止页面滚动的方法，分别是使用CSS样式、JavaScript事件和第三方库。在实际开发中，可以根据具体情况选择合适的方法来解决问题。
最后提醒一下，禁止滚动可能会影响用户的操作体验，因此需要谨慎使用，并在必要时添加一些用户提示或说明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30413