禁止屏幕滚动 - Newbie_小白

禁止屏幕滚动
<!DOCTYPE> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
  <style>
    *{
      margin: 0;
      padding:0;
  }
  button{
      margin: 10px;
  }
  .test{
      position: relative;
      width: 300px;
      height: 1000px;
      background: #ccc;
  }
  .test .head,
  .test .center,
  .test .foot{
      position: absolute;
      left:0;
  }
  .test .head{
      top:0;
  }
  .test .center{
      top: 500px;
  }
  .test .foot{
      bottom: 0;
  }
</style>
</head> 
<body> 
  <button type="button" id="no_scroll">点我屏幕不能滚动</button>
  <button type="button" id="scroll">点我屏幕允许滚动</button>
  <div class="test">
    <p class="head">这里是头部</p>
    <p class="center">这里是中部</p>
    <p class="foot">这里是底部</p>
</div>
<script type="text/javascript">
    var handler = function () {
        event.preventDefault();
        event.stopPropagation();
    }; 
    document.getElementById("no_scroll").addEventListener('click',function(){
        document.body.style.cssText="overflow:hidden";
        document.body.addEventListener('touchmove',handler,false);
        document.body.addEventListener('wheel',handler,false);
    });
    document.getElementById("scroll").addEventListener('click',function(){
        document.body.style.cssText="overflow:auto";
        document.body.removeEventListener('touchmove',handler,false);
        document.body.removeEventListener('wheel',handler,false);
    });
</script>
</body> 
</html>
posted on 2017-06-26 09:52 Newbie_小白阅读(486) 评论(0) 编辑收藏举报