js禁止微信瀏覽器下拉顯示黑底查看網址，不影響內部Scroll

開發項目跑在微信瀏覽器常常會遇到一個問題，微信瀏覽器下拉的時候會出現自帶的黑色底色（顯示網址）以下圖：

 

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