移動端開發的小伙伴們應該遇到過一個問題：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();

}

};

總結

以上是生活随笔為你收集整理的WEB前端 屏蔽移动端浏览器页面顶部提示 此网页由网站提供的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。