【JS 阻止滑动穿透】

最新推荐文章于 2024-07-23 19:42:13 发布

cv全粘工程师

最新推荐文章于 2024-07-23 19:42:13 发布

阅读量1.2k

点赞数 1

分类专栏： vue JS uniapp 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Ge_Daye/article/details/131985719

版权

JS 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

uniapp

28 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

文章介绍了防止页面滑动穿透的三种技术方案，包括使用CSS的overflow:hidden属性，通过JavaScript监听并阻止touchmove事件的默认行为，以及在弹出层或模态框操作中动态修改body的class来控制滚动。

摘要由CSDN通过智能技术生成

在实现阻止滑动穿透时，可以使用以下方法之一：

使用 CSS 属性 overflow: hidden 来禁止页面滚动。

body {
  overflow: hidden;
}

使用 JavaScript 监听滚动事件并阻止默认行为。

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

在弹出层或模态框的开启和关闭时，动态地给 body 元素加上或移除一个类来实现滚动穿透的阻止。

const body = document.querySelector('body');
const modal = document.querySelector('.modal');

function openModal() {
  body.classList.add('no-scroll');
  modal.style.display = 'block';
}

function closeModal() {
  body.classList.remove('no-scroll');
  modal.style.display = 'none';
}