技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > javascript > 正文

屏蔽页面中的scroll滚动效果

来源: 技术CTO 阅读:

目前开发中遇到一个需求,就是需要在弹出框弹出的时候,屏蔽页面的滚动,或者说禁止页面滚动。否则非fixed定位的弹出框会随着滚动而移动,但这个不是我所想要的。

网上也查了下解决方法,比较靠谱的并且自己也测试基本成功的,算是屏蔽层添加来防止鼠标触发滚动,比如
<body>
  <div id="outframe">
    <div id="content">.......这里比较长的内容.....</div>
    <div id="dialog">...</div>
    <div id="mask"></div>
  </div>
</body>

此时如果mask屏蔽层的绝对定位的参照对象是body对象,且滚动条的对应对象为outframe对象,那么此时mask铺展全屏的时候会把outframe的滚动给屏蔽掉,如此可以解决一些通常需求。

然而我的问题却比较棘手,滚动条实际是在body上的,那么此时按照基本的dom结构,无法自定义一个与body同级别的遮罩层来屏蔽滚动,无法通过该方法解决。

请教各位,还有其他方法可以屏蔽body上的滚动条么?

楼主可以看看这个http://blog.csdn.net/xllily_11/article/details/51480723
Quote: 引用 2 楼 u013116426 的回复:

楼主可以看看这个http://blog.csdn.net/xllily_11/article/details/51480723[/qu、、、、、不好意思发错东西了
其实你已经会做了。
给body添加滚动事件监听,当弹框弹出body的滚动事件就阻止,否则就不阻止。
最简单可以放个全局变量判断弹框有没有弹出,或者直接判断弹框是否可视。
引用 4 楼 xzy21com 的回复:
其实你已经会做了。
给body添加滚动事件监听,当弹框弹出body的滚动事件就阻止,否则就不阻止。
最简单可以放个全局变量判断弹框有没有弹出,或者直接判断弹框是否可视。

滚动事件是在滚动后触发,阻止不了滚动的。

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^