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>
  • 相关阅读:
    hibernate3.2多表关联查询常见问题
    Map 四种同步方式的性能比较
    架构师书单(2010版)
    强碱性食品 高嘌呤食物
    Linux内核crash/Oops异常定位分析方法
    linux驱动基础系列linux spi驱动框架分析
    vmware server 虚拟机与宿主机之间共享网络设置问题
    花生壳
    Groove 线上办公室
    coolit
  • 原文地址:https://www.cnblogs.com/limonyun/p/14058945.html
Copyright © 2011-2022 走看看