zoukankan      html  css  js  c++  java
  • 禁止屏幕滚动

    <!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> 
  • 相关阅读:
    Codeforces Round #601 (Div. 2)
    A. A Serial Killer
    B. Sherlock and his girlfriend
    Codeforces Round #600 (Div. 2)
    Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2) C. Magic Grid
    7213:垃圾炸弹
    2011
    Educational Codeforces Round 46 (Rated for Div. 2)
    Stall Reservations
    Pots
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7079201.html
Copyright © 2011-2022 走看看