当前位置: 首页 > news >正文

【JS 阻止滑动穿透】

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

  1. 使用 CSS 属性 overflow: hidden 来禁止页面滚动。
body {overflow: hidden;
}
  1. 使用 JavaScript 监听滚动事件并阻止默认行为。
document.addEventListener('touchmove', function(e) {e.preventDefault();
}, { passive: false });
  1. 在弹出层或模态框的开启和关闭时,动态地给 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';
}
.no-scroll {overflow: hidden;
}
http://www.lryc.cn/news/98729.html

相关文章:

  • 编译原理
  • 项目播报 | 新基德携手璞华易研PLM,打造企业新一代研发管理平台
  • elementui el-table 封装表格
  • 集合--collections
  • go使用gin结合jwt做登录功能
  • 【C++】开源:Boost网络库Asio配置使用
  • 图像滤波器
  • 【每日一题】2569. 更新数组后处理求和查询
  • PLC的高端版本通常具有以下特点:
  • Scrum敏捷开发项目管理和产品研发管理培训- Leangoo领歌
  • 爬虫小白-如何辨别是否有cookie反爬案例
  • 机器人状态估计:robot_localization 功能包简介与安装
  • RNN架构解析——GRU模型
  • 【LeetCode】141.环形链表
  • nodejs+vue+elementui汽车销售网站
  • spring boot整合kaptcha验证码
  • 【Linux下6818开发板(ARM)】在液晶屏上显示RGB颜色和BMP图片
  • React的hooks---useLayoutEffect
  • 北京创业孵化器汇总
  • 电信软件的过去、现在和未来:推动核心网发展的关键力量
  • 2023年全国程序员薪酬排行天梯榜
  • 设计模式-工厂模式
  • HummerRisk V1.3.0 发布
  • SkyWalking链路追踪中Trace概念以及Trace与span的关系
  • 美容店预约小程序制作教程详解
  • 什么是内存泄漏及如何防护内存泄漏
  • 【libuv】httpserver启用ssl 及 播放的日志打印
  • 13、ffmpeg使用nvidia显卡对OAK深度相机进行解码和编码
  • 自动化测试如何做?搭建接口自动化框架从0到1实战(超细)
  • 安装Python之后 安装库报错 There was an error checking the latest version of pip.