问题描述
当浮层滚动触底时, 再次滑动浮层时, 浮层下面的页面会进行滚动, 即滚动穿透
解决办法
通过position: fixed将body固定在当前位置, 关闭浮层时, 再将清除该样式, 将页面滚动值设置为之前的值.
代码
function stopBodyScroll (isFixed) {
var top;
if (isFixed) {
top = document.documentElement.scrollTop || document.body.scrollTop
document.body.style.position = 'fixed'
document.body.style.top = -top + 'px'
} else {
top = -parseInt(document.body.style.top)
document.body.style.position = ''
document.body.style.top = ''
// 回到原先的top
document.documentElement.scrollTop ? document.documentElement.scrollTop = top : document.body.scrollTop = top
}
}
注意
关闭浮层, 恢复滚动时, 不能不能使用document.documentElement.scrollTop的值, 由于设置了position, 其值为0, 因此需要通过top的值获取
PC端可以直接通过设置body的overflow: hidden属性, 来固定底层页面, 但是该方法再移动端无效
