js禁止滑到最顶端时微信浏览器中显示当前网址

做移动端开发的小伙伴们应该遇到过一个问题：h5页面在微信端打开的时候，滑到最顶部再网上滑就会出现一段黑色的背景，并且显示当前页面url，虽然一般情况下不会有太大的影响，但是如果要自定义显示内容就会影响我们的需求了。找了很多方法，都是简单粗暴地直接e.preventDefault()，但这样会禁止内部Scroll，导致页面不能滚动，上拉加载失效，太残暴了，找了很久，终于找到了办法，可以达到禁止微信黑底并且不影响页面其他滑动，在此记录下：
// 首先禁止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();        }    };
   

查看原文：http://lidada.org/wechart-stop/