微信公眾號開發如何阻止下拉黑視窗的出現

藍色熾夢發表於2018-03-22

來吧開始亮程式碼:

// 然後取得觸控點的座標
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();
}
};

相關文章