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 Code:

.forbidrootscroll{height:100%;overflow:hidden;}

然后在弹出弹层时给html和body添加这个class，在关闭弹层时，再把html和body的这个class给remove掉就OK了，这样可以让超出一屏的页面继续滚动。

转载于:https://www.cnblogs.com/tnnyang/p/6781698.html