JavaScript實(shí)現(xiàn)移動(dòng)端禁止下拉露出網(wǎng)址廣告屏蔽技巧
需求
移動(dòng)端禁止下拉 露出網(wǎng)址或廣告
查找解決方案
基本都是
document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, { passive: false })
就很離譜,這樣會(huì)導(dǎo)致scroll無(wú)法滾動(dòng)。
我的解決方案
function stopDown(el) {
let startX, startY;
// el是最外層div
el.addEventListener("touchstart", (e) => {
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
})
el.addEventListener("touchmove", (e) => {
//獲取滑動(dòng)屏幕時(shí)的X,Y
let endX = e.changedTouches[0].pageX;
let endY = e.changedTouches[0].pageY;
//獲取滑動(dòng)距離
let distanceX = endX - startX;
let distanceY = endY - startY;
//判斷滑動(dòng)方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
// console.log('往右滑動(dòng)');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
// console.log('往左滑動(dòng)');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
// console.log('往上滑動(dòng)');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
// 核心在這
// path 是從觸摸點(diǎn)到最外層所有祖先節(jié)點(diǎn)的集合,不了解就log看下
let path = e.path
let is_scrollTop = false
// 從觸摸點(diǎn)到最外層所有祖先節(jié)點(diǎn) scrollTop不為0就不禁止下拉 為0 就禁止下拉
for (let dom of path) {
if (dom.scrollTop) {
is_scrollTop = true
}
}
if (!is_scrollTop) {
e.preventDefault()
return false
}
// console.log('往下滑動(dòng)');
} else {
// console.log('點(diǎn)擊未滑動(dòng)');
}
})
}
目前自測(cè)安卓 微信內(nèi)、uc、小米瀏覽器 效果都不錯(cuò),更多關(guān)于移動(dòng)端禁止下拉廣告網(wǎng)址的相關(guān)技巧請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript 類(lèi)型轉(zhuǎn)換的詳細(xì)實(shí)現(xiàn)
本文主要介紹了JavaScript 類(lèi)型轉(zhuǎn)換的詳細(xì)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下2022-11-11
一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關(guān)文章在介紹它,下面這篇文章主要給大家介紹了關(guān)于一道超經(jīng)典js面試題Foo.getName()的相關(guān)資料,需要的朋友可以參考下2022-03-03
layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè)
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

