在開發(fā)移動(dòng)web的時(shí)候诊赊,相信大家都會(huì)遇到當(dāng)有 fixed定位遮罩層彈出時(shí)承疲,在屏幕上滑動(dòng)能夠滑動(dòng)背景下面的內(nèi)容月弛,這在大部分場(chǎng)景下都不是和友好的,解決方法如下:
1. CSS overflow:hidden
一般這種情況如果需要阻止?jié)L動(dòng)嘴簡(jiǎn)單的方法就是彈層彈出后俊犯,給body設(shè)置樣式 overflow:hidden;在彈層隱藏的同時(shí)去掉加上的css, 不過(guò)這種并不適用與body的高度剛好是頁(yè)面的高度,實(shí)際下層穿透滾動(dòng)的元素是在body中的其他元素伤哺。 不能完全禁止燕侠,還是會(huì)有元素可以滾動(dòng)。
body{
overflow:hidden
}
2. JS preventDefault
監(jiān)聽touchmove事件并阻止默認(rèn)事件
document.getElementById('mask').addEventListener('touchmove', function (event) {
event.preventDefault();
})