zoukankan      html  css  js  c++  java
  • 微信浏览器拖动出现黑色/白色背景、网址问题解决方案

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
     
            .header, .footer {
                position: fixed;
                 100vw;
                height: 40px;
                line-height: 40px;
                text-align: center;
                z-index: 3;
            }
     
            .header {
                top: 0;
                border-bottom: 1px solid #e6e6e6;
            }
     
            .footer {
                bottom: 0;
                border-top: 1px solid #e6e6e6;
     
            }
     
            .scrollEle {
                position: fixed;
                 100vw;
                top: 40px;
                bottom: 40px;
                z-index: 2;
                background: #fff;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }
        </style>
    </head>
    <body>
    <div class="header">Header</div>
    <div class="scrollEle">
        <p>......</p>
        <p>......</p>
        <p>......</p>
        <p>......</p>
    </div>
    <div class="footer">Footer</div>
    </body>
    <script>
      var startX = 0, startY = 0;
     
      function touchStart(e) {
        try {
          var touch = e.touches[0],
            x = Number(touch.pageX),
            y = Number(touch.pageY);
          startX = x;
          startY = y;
        } catch (e) {
          alert(e);
        }
      }
     
      document.addEventListener('touchstart', touchStart);
      var ele = document.querySelector('.scrollEle');
      ele.ontouchmove = function (e) {
        var point = e.touches[0],
          eleTop = ele.scrollTop,
          eleScrollHeight = ele.scrollHeight,
          eleOffsetHeight = ele.offsetHeight,
          eleTouchBottom = eleScrollHeight - eleOffsetHeight;
        if (eleTop === 0) {
          if (point.clientY > startY) {
            e.preventDefault();
          }
        }
        else if (eleTop === eleTouchBottom) {
          if (point.clientY < startY) {
            e.preventDefault()
          }
        }
      };
    </script>
    </html>
  • 相关阅读:
    mysql修改数据表名
    HDU 5742 It's All In The Mind (贪心)
    HDU 5752 Sqrt Bo (数论)
    HDU 5753 Permutation Bo (推导 or 打表找规律)
    HDU 5762 Teacher Bo (暴力)
    HDU 5754 Life Winner Bo (博弈)
    CodeForces 455C Civilization (并查集+树的直径)
    CodeForces 455B A Lot of Games (博弈论)
    CodeForces 455A Boredom (DP)
    HDU 4861 Couple doubi (数论 or 打表找规律)
  • 原文地址:https://www.cnblogs.com/limonyun/p/14058945.html
Copyright © 2011-2022 走看看