js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

Posted 2020-09-18 Jason齐齐

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

 

网上好多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();
        }
    };