zoukankan      html  css  js  c++  java
  • [转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

    网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法:

    $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
    or
    document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

    查阅了资料然后进行了修改,于是得到以下解决方案,可以达到禁止微信黑底并且不影响上拉加载

    // 首先禁止body
        document.body.ontouchmove = function (e) {
              e.preventDefault();
        };
    
    // 然后取得触摸点的坐标
       var startX = 0, startY = 0;
        //touchstart事件
        function touchSatrtFunc(evt) {
            try
            {
                //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                var touch = evt.touches[0]; //获取第一个触点
                var x = Number(touch.pageX); //页面触点X坐标
                var y = Number(touch.pageY); //页面触点Y坐标
                //记录触点初始位置
                startX = x;
                startY = y;
    
            } catch (e) {
                alert('touchSatrtFunc:' + e.message);
            }
        }
        document.addEventListener('touchstart', touchSatrtFunc, false);
    
    // 然后对允许滚动的条件进行判断,这里讲滚动的元素指向body
      var _ss = document.body;
        _ss.ontouchmove = function (ev) {
            var _point = ev.touches[0],
                    _top = _ss.scrollTop;
            // 什么时候到底部
            var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
            // 到达顶端
            if (_top === 0) {
                // 阻止向下滑动
                if (_point.clientY > startY) {
                    ev.preventDefault();
                } else {
                    // 阻止冒泡
                    // 正常执行
                    ev.stopPropagation();
                }
            } else if (_top === _bottomFaVal) {
                // 到达底部 如果想禁止页面滚动和上拉加载,讲这段注释放开,也就是在滚动到页面底部的制售阻止默认事件
                // 阻止向上滑动
                // if (_point.clientY < startY) {
                //     ev.preventDefault();
                // } else {
                //     // 阻止冒泡
                //     // 正常执行
                //     ev.stopPropagation();
                // }
            } else if (_top > 0 && _top < _bottomFaVal) {
                ev.stopPropagation();
            } else {
                ev.preventDefault();
            }
        };
  • 相关阅读:
    自行车平衡原理
    自行车为什么前轮和后轮受到的摩擦力相反呢 自行车前轮后轮转动方向一样 自行车运动原理
    UltraCompare文件内容比较工具
    msvcp100d.dll文件丢失,解决找不到msvcp100d.dll的问题
    mfc对话框
    bzoj 2298: [HAOI2011]problem a
    9.2python操作redis
    9.1 mysql+centos7+主从复制
    9,Linux下的python3,virtualenv,Mysql、nginx、redis安装配置
    8,Linux系统基础优化及常用命令
  • 原文地址:https://www.cnblogs.com/sungong1987/p/11196746.html
Copyright © 2011-2022 走看看