JavaScript實(shí)現(xiàn)移動(dòng)端禁止下拉露出網(wǎng)址廣告屏蔽技巧
更新時(shí)間：2022年06月01日 17:11:58 作者：殺破狼1914
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)移動(dòng)端禁止下拉露出網(wǎng)址或的廣告屏蔽技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
需求
移動(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)文章
彈出層效果大家在網(wǎng)站上經(jīng)常遇到此功能，下面小編給大家分享一段js代碼制作彈出層效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下吧2016-12-12
下面小編就為大家?guī)?lái)一篇利用JS提交表單的幾種方法和驗(yàn)證(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
下面小編就為大家分享一篇webpack 單獨(dú)打包指定JS文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
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
本文給大家分享的是個(gè)人總結(jié)的10條非常常用的原生javascript的小技巧，都是平時(shí)項(xiàng)目中用到的，這里總結(jié)記錄下來(lái)，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript對(duì)象的淺拷貝和深拷貝代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè)
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07