css解决滚动弹出层⾥边的滚动条时带动了整个页⾯滚动的问题
之前⼀个朋友问我说他的⼀个弹出层在弹出后，上下滑动弹出层或遮罩层，结果遮罩层下边的整个页⾯（页⾯超出了⼀屏）也跟着滚动了，他说他不想要这样的效果，我说你把弹出层和遮罩层的position:fixed设置为position:absolute就可以了，结果他说不⾏。当时我也没有在意，平时我也基本没有在意过这样的问题，所以就让他再查查资料。今天，我在做页⾯时，弹出层控制了⾼度，⾥边的内容多的话就必须要可以滚动来上下查看，⽽当我滚动时，果真带动了遮罩层下边整个页⾯的滚动，这就不太好了，效果很差，所以就开始解决办法。
⽹上很多⼈给出了解决办法，有⼈说对局部需要滚动条的元素，尝试使⽤这个css属性：-webkit-overflow-scrolling: touch；我拿来⼀试，不⾏啊，⾕歌浏览器压根不认识这个玩意，我⼜这么写-webkit-overflow-scrolling: touch;overflow-scrolling: touch;，也还是不⾏啊，⾕歌模拟器不识别，放在⼿机的真实环境⾥也不管⽤，是我使⽤的⽅法不对吗？⽬前还不清楚，反正我试了不⾏。还有⼈说在弹出层的同时设置body{height:100%;overflow: hidden;}，我试了也还是不⾏。最后我索性给html也加上了{height:100%;overflow: hidden;}，⼀试，哎，⾏了，哈哈...
具体我是这么做的：
css设置表格滚动条
CSS Code:
.forbidrootscroll{height:100%;overflow:hidden;}
然后在弹出弹层时给html和body添加这个class，在关闭弹层时，再把html和body的这个class给remove掉就OK了，这样可以让超出⼀屏的页⾯继续滚动。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。