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>
  • 相关阅读:
    vue实战(3):底部导航显示、搭建各模块静态页面、添加登录页页面与路由
    vue实战(2):初始化项目、搭建底部导航路由
    hexo
    移动端自适应
    vue过场动画
    获取 TypeScript
    TypeScript 与 JavaScript 的区别
    api封装使用
    vue学习
    dom的增删改
  • 原文地址:https://www.cnblogs.com/limonyun/p/14058945.html
Copyright © 2011-2022 走看看