1. 阻止默認(rèn)滑動(dòng)行為
mounted () {
document.body.addEventListener(
'touchmove',
function (e) {
e.preventDefault() // 阻止默認(rèn)的處理方式(阻止下拉滑動(dòng)的效果)
},
{ passive: false }
) // passive 參數(shù)不能省略婚肆，用來(lái)兼容ios和android
}
結(jié)果整個(gè)頁(yè)面都無(wú)法滑動(dòng)，不是我要的效果较性。如果是有頁(yè)面不要滑動(dòng)的那種可以嘗試。
2. 使用 vue-bounce
使用 vue-bounce 來(lái)解決责循，也沒(méi)啥用。不知道是不是我打開(kāi)的方式不對(duì)攀操。
安裝
$ npm install vue-bounce
// main.js
import Bounce from 'vue-bounce'
Vue.use(Bounce)
使用指令
<div class="container" v-bounce>
...scroll element
</div>
.container {
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS：又嘗試了一下，還是有點(diǎn)效果的歹垫。就是在頂部進(jìn)行下拉時(shí)會(huì)禁用掉 touchmove 事件颠放，但是效果還是不好排惨。因?yàn)槲铱赡芟韧禄粍?dòng)又往別的方向滑碰凶。
3. 通過(guò) ios 端關(guān)閉彈性效果
靈光一閃鹿驼，想問(wèn)下 IOS 端的同學(xué)能不能把彈性關(guān)了辕宏，他給出的解決方案，結(jié)合我們 native 端使用了 flutter舷蟀，給出方案：
_webView.scrollView.alwaysBounceVertical = NO;
_webView.scrollView.bounces = NO;
我讓 native 端的同學(xué)進(jìn)行嘗試面哼，結(jié)果據(jù) flutter 端同事回復(fù)，這個(gè)開(kāi)關(guān)只關(guān)閉了頁(yè)面整體邊緣的橡皮筋效果魔策，對(duì)于 H5 內(nèi) div 的邊界彈性效果無(wú)效。
4. 關(guān)閉 body 的滑動(dòng)虎敦，只允許目標(biāo)元素滑動(dòng)
網(wǎng)上找的方案政敢，明顯不對(duì)味。
// Prevents window from moving on touch on older browsers.
window.addEventListener('touchmove', function (event) {
event.preventDefault()
}, false)
// Allows content to move on touch.
document.querySelector('.body-container').addEventListener('touchmove', function (event) {
event.stopPropagation()
}, false)
沒(méi)什么用……感覺(jué)這個(gè)是解決頁(yè)面整體彈性滑動(dòng)的喷户。
5. 使用 overscroll-behavior
使用一個(gè)新的 CSS 屬性來(lái)實(shí)現(xiàn)
container {
overscroll-behavior: none;
}
結(jié)果，依舊不行闹获。
6. 使用 iNoBounce
使用 https://github.com/lazd/iNoBounce 來(lái)阻止回彈效果河哑，發(fā)現(xiàn)效果應(yīng)該是和 vue-bounce 一樣，在用戶直接拖拽邊緣的時(shí)候禁用移動(dòng)行為璃谨，但依然存在來(lái)回滑動(dòng)沒(méi)反應(yīng)的情況。
7. 阻止默認(rèn)滑動(dòng)行為拱雏，自己用 JavaScript 控制滑動(dòng)
最后通過(guò)自己寫(xiě)拖拽滑動(dòng)容达，的確解決了這個(gè)問(wèn)題古涧。解決方案在 解決 IOS 13+ H5 滑動(dòng)邊界橡皮筋彈性效果
一文中花盐。
