手机页面滚动穿透问题【原创】_html/css_WEB-ITnose-html教程-PHP中文网

手机页面滚动穿透问题【原创】_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:59:48

原创

1391人浏览过

最近在写的微信页面有遇到一个问题：就是点击页面一个按钮出来弹框和透明蒙版后，理论上底部的父页面是不可以被操作的。但是现在对当前弹框和透明蒙版组成的页面滑动时，底部的父页面还是会跟着滚动，这也就是所谓的手机页面穿透问题。

百度了很多方法后，还是没能完美的解决这个问题。不过这里也将把这些方法总结列举一下，期待后面有更好的解决办法。

方法一：

.alpha {     height: 100%;     overflow: hidden;     position: relative;}.alpha body {     height: 100%;     overflow: hidden;}

登录后复制

当你切换弹框出现或隐藏的时候只要切换该css，即：

$('html').toggleClass('alpha');

登录后复制

当然在实际使用的时候你可能需要拆开使用这句代码，如当你点击按钮让弹框出来的时候需要使用该css，即用：

立即学习“前端免费学习笔记（深入）”；

$('html').toggleClass('alpha');

登录后复制

当你点击确定或取消让弹框消失的时候，你需要去掉该css使父页面恢复正常滚动状态，即：

剪刀手

全自动AI剪辑神器：日剪千条AI原创视频，零非原创风险，批量高效制作引爆流量！免费体验，轻松上手！

查看详情

$('html').removeClass('alpha');

登录后复制

该方法的缺点就是当你的页面内容一屏显示不完时，需要滚动屏幕显示全部内容时，你的弹框会出现在页面内容的顶部，因为上面的css已经将页面高度定义成了屏幕高度，所以页面下面的部分也就相当于暂时截取掉了，当你隐藏弹框的时候，你也是在页面顶部，不会默认回到你之前点击按钮（按钮在页面底部）的地方，在页面很长的时候用户体验不是很好。方法二：

.noscroll {    position: fixed!important}

登录后复制

var page = document.getElementsByTagName('body')[0];//禁止页面滚动page.classList.add('noscroll');//恢复页面滚动page.classList.remove('noscroll');

登录后复制

也有上面的缺点方法三：

//If you want to use the iframe's scrollbar and not the parent's use thisdocument.body.style.overflow = 'hidden';//If you want to use the parent's scrollbar and not the iframe's then you need to use:document.getElementById('your_iframes_id').scrolling = 'no';or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">

登录后复制

该方法不会出现上面的问题，但是可惜的是在手机页面没用，只在pc浏览器有用。

本文永久地址：http://blog.it985.com/15205.html

本文出自IT985博客，转载时请注明出处及相应链接。