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> 
  • 相关阅读:
    【loj2639】[Tjoi2017]不勤劳的图书管理员
    【bzoj3514】Codechef MARCH14 GERALD07加强版
    BZOJ1002【FJOI2007】轮状病毒
    数论基础(附加例题)
    表达式总结
    背包
    hdu1027
    hdu1026
    hdu1025
    hdu1024
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7079201.html
Copyright © 2011-2022 走看看