css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题
2017-04-28 15:09
555 查看
之前一个朋友问我说他的一个弹出层在弹出后,上下滑动弹出层或遮罩层,结果遮罩层下边的整个页面(页面超出了一屏)也跟着滚动了,他说他不想要这样的效果,我说你把弹出层和遮罩层的
网上很多人给出了解决办法,有人说对局部需要滚动条的元素,尝试使用这个css属性:
具体我是这么做的:
CSS Code:
然后在弹出弹层时给html和body添加这个class,在关闭弹层时,再把html和body的这个class给remove掉就OK了,这样可以让超出一屏的页面继续滚动。
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了,这样可以让超出一屏的页面继续滚动。
相关文章推荐
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- Extjs GridPanel 合计功能 解决滚动条滚动问题和页面刷新滚动条回到初始位置问题。
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- Extjs GridPanel 合计功能 解决滚动条滚动问题和页面刷新滚动条回到初始位置问题。
- 如何让滚动条消失,且页面可以正常滚动(解决写选项卡时可能遇见的一个问题)
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
- 阻止在div上滚动滚动条,到底部和顶部带动整个页面的滚动条
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- 解决移动端web页面整个背景图横向滚动问题
- 中间部分滚动记录div内滚动条的位置, 以及将页面分为三部分组成解决position:fixed在ios下失效问题
- 解决JavaScript页面刷新与弹出窗口问题
- JavaScript页面刷新与弹出窗口问题解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- JavaScript页面刷新与弹出窗口问题解决方法