WEB前端 屏蔽移动端浏览器页面顶部提示 此网页由网站提供

移动端开发的小伙伴们应该遇到过一个问题：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();

}

};