這兩天開(kāi)發(fā)移動(dòng)端H5因?yàn)閕os 自帶的滑動(dòng)屬性導(dǎo)致頁(yè)面里滑動(dòng)時(shí)ios系統(tǒng)下 在邊界滑動(dòng)動(dòng)畫(huà)未結(jié)束前 滑動(dòng)頁(yè)面導(dǎo)致頁(yè)面無(wú)法滑動(dòng),需等待ios邊界動(dòng)畫(huà)結(jié)束后才能滑動(dòng)。
由于頁(yè)面是微前端 出問(wèn)題的和真正能簡(jiǎn)單控制的層面在我項(xiàng)目外面了
網(wǎng)上一頓找方法 沒(méi)什么吊用 出問(wèn)題的不在我這里
overflow: hidden;
overscroll-behavior: none;
-webkit-overflow-scrolling: auto;
overflow-scrolling: auto;
于是就找到監(jiān)聽(tīng)touchmove的方法
addEventListener的時(shí)候e.preventDefault();
removeEventListener的時(shí)候也這么弄一下不就行了;
結(jié)果您猜怎么著 對(duì) 就是不行
之前從來(lái)沒(méi)有仔細(xì)的研究過(guò)這里
這是我之前的寫(xiě)法
const checkedTarget = (e) => {
if (!isTarget) {
e.preventDefault();
}
}
document.addEventListener('touchmove', (e) => {
checkedTarget(e)
}, { passive: false });
// 觸摸移動(dòng)事件
document.removeEventListener('touchmove', (e) => {
checkedTarget(e)
}, { passive: false });
實(shí)際是錯(cuò)的
網(wǎng)上一頓找 智障ai也問(wèn)了一堆 沒(méi)d用
最后偶然間看到網(wǎng)上的大佬說(shuō)了這么一句話 我悟了:
一:相同事件綁定和解除,需要使用共用函數(shù);
二:共用函數(shù)不能帶參數(shù);
于是我改成
document.addEventListener('touchmove', checkedTarget, { passive: false });
document.removeEventListener('touchmove', checkedTarget, { passive: false });
補(bǔ)充一下這樣寫(xiě)也是不對(duì)的 因?yàn)椴粷M足第一個(gè)條件
document.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
// 觸摸移動(dòng)事件
document.removeEventListener('touchmove', (e) =>e.preventDefault(), { passive: false });
至此,彩筆藝術(shù)已成!
后來(lái)我找到更簡(jiǎn)單的辦法 在自己的頁(yè)面不想讓滑動(dòng)的位置可以給設(shè)置屬性 無(wú)論是動(dòng)態(tài)設(shè)還是css寫(xiě)死 均可
給不想讓ios用戶點(diǎn)擊能滑動(dòng)的地方設(shè)置上 這些地方在安卓機(jī)上本來(lái)也是滑動(dòng)不了的
一行代碼能解決的問(wèn)題 由于pc上沒(méi)有ios模擬器以及沒(méi)有用ios手機(jī)本地調(diào)試 需要改完打包發(fā)版 借手機(jī)看效果 被我研究了多半天的時(shí)間 恨自己菜啊
touch-action: none;