js解决移动端滚动穿透问题方案详解
更新时间：2023年07月28日 10:11:58 作者：吃和远方
这篇文章主要为大家介绍了js解决移动端滚动穿透问题方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
移动端有可滚动的弹窗肯定会遇到的问题，滑动弹层背景跟着滚动，如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉，但是如果弹窗内容过多需要滚动那就不可以这样做。
更正（只适合白色背景的页面！只适合白色背景的页面！只适合白色背景的页面！因为有时候会出现闪白！我也没有找到完美解决滚动穿透的办法）
vue的解决办法
isShowDialog是控制弹窗显示的，监听isShowDialog的改变，对watch使用不明白的可以去看vue侦听器
watch：{
// 如果 ` isShowDialog` 发生改变，这个函数就会运行,第一个参数是isShowDialog最新的值
isShowDialog（val){
this.scrollForbid(val)
}
}scrollForbid(val) {
let body = document.body
if（val){
// 弹窗显示的时候
this.scrollTop = window.scrollY
body.style.width = '100%'
body.style.position = 'fixed'
body.style.top = -this.scrollTop + 'px'
} else {
// 弹窗关闭
body.style.width = ''
body.style.position = ''
body.style.top = ''
window.srcollTo(0,this.scrollTop)
}
}原生js解决办法
如果用原生来写的话调用scrollForbid(val)方法，禁止滚动的时候传true，解除滚动传false过去就可以了。
以上就是js解决移动端滚动穿透问题方案详解的详细内容，更多关于js移动端滚动穿透的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了前端JavaScript中的class,类是用于创建对象的模板，JavaScript中的Class更多的还是语法糖，本质上绕不开原型链，下面就来看看关于JavaScript class类的详细内容吧2021-10-10
JavaScript前端学算法题解LeetCode最大重复子字符串
这篇文章主要为大家介绍了JavaScript前端学算法题解LeetCode最大重复子字符串，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了Electron 剪贴板实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了ChatGPT前端编程秀之教你别拿编程语言不当语言，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
js前端实现word excel pdf ppt mp4图片文本等文件预览
这篇文章主要为大家介绍了js前端实现word excel pdf ppt mp4图片文本等文件预览示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
JavaScript是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。本篇内容小编就来详细解说JavaScript常用的对象,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了微信小程序 仿猫眼实现实例代码的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下2017-03-03
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
这篇文章主要介绍了微信小程序 开发之滑块视图容器(swiper)详解及实例代码的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要为大家介绍了如何使用mock.js实现接口测试的自动化详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论