首页 新闻 会员 周边

<!!>如何利用JavaScript将浏览器的滚动条在遮罩层和弹窗出现时停止滚动？

0
[已关闭问题] 关闭于 2017-09-19 13:50

页面元素：

1、有个width：1200px；height：2300px的页面；

2、有一个遮罩层，填满了整个可视页面；

3、遮罩层上浮动一个居中的div弹窗；

guangalen的主页 guangalen | 初学一级 | 园豆：6
提问于：2017-07-17 10:38
< >
分享
所有回答(2)
0 
//当弹窗出现时触发此函数
var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置
window.onscroll=function(){
    document.body.scrollTop = scrollTop;//赋值给滚动条的位置
};

//当弹窗隐藏时触发此函数
window.onscroll=function(){
    document.body.scrollTop = document.body.scrollTop;//赋值给滚动条的位置
};



//目前只想到了这个方法，希望能帮到你。缺点是当弹窗为显示状态时滑动页面会出现颤动情况。
与阳光握手言和 | 园豆：373 (菜鸟二级) | 2017-07-17 19:24
0

pc端：

//为了简便定义一个样式类
 <style type="text/css">
  .html-body-overflow
  {
    overflow-x:hidden;
    overflow-y:hidden;
  }
 </style>
 
 <script type="text/javascript">
  //禁止滚动条(默认是没有附加这个样式类的）
  $(document.body).toggleClass("html-body-overflow");
  //启动滚动条
  $(document.body).toggleClass("html-body-overflow");
 </script>

 

移动端：

$(document).on('touchmove',function(e){
e.preventDefault();
})
码背上的男人 | 园豆：202 (菜鸟二级) | 2017-07-19 15:23
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。