// 首先禁止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 {
// 阻止冒泡
// 正常執(zhí)行
ev.stopPropagation();
}
} else if (_top === _bottomFaVal) {
// 到達底部 如果想禁止頁面滾動和上拉加載,講這段注釋放開,也就是在滾動到頁面底部的制售阻止默認事件
// 阻止向上滑動
// if (_point.clientY < startY) {
// ev.preventDefault();
// } else {
// // 阻止冒泡
// // 正常執(zhí)行
// ev.stopPropagation();
// }
} else if (_top > 0 && _top < _bottomFaVal) {
ev.stopPropagation();
} else {
ev.preventDefault();
}
};
js禁止瀏覽器下拉顯示,不影響內部scroll
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關閱讀更多精彩內容
- 此類事件是手機touchmove默認事件行為,可以通過js代碼隱藏事件: 但這樣往往會把頁面原生的scroll效果...
- 大家可能會遇到開發(fā)公眾號的時候,下來會出來源地址,下面的代碼可以解決禁止下拉的問題~
- 介紹 vue-disbounce是一款基于Vue.js的自定義組件,可以有效避免觸發(fā)h5頁面在ios瀏覽器內置的下...