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)文章
js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)
這篇文章主要介紹了JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata),本文給大家分享的js獲取表單數(shù)據(jù)更簡(jiǎn)潔,通過(guò)兩種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js金額數(shù)字格式化實(shí)現(xiàn)代碼(加減逗號(hào)處理)
這篇文章主要介紹了js中將數(shù)字格式化為金額的方法,使用加減逗號(hào)處理金額,一個(gè)格式化金額的代碼,有需要的朋友參考下2014-04-04