移动端禁止弹窗蒙层下页面滚动
Posted lee-xiumei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端禁止弹窗蒙层下页面滚动相关的知识，希望对你有一定的参考价值。
第一种简单的方法：
在弹窗出现时，在 html 上添加 class：
.open-model {
overflow: hidden;
height: 100%;
}
弹窗消失时，再 remove class
代码示例（react）：
import React from ‘react‘
import {css} from ‘glamor‘
css.global(‘.open-model‘, {overflow: ‘hidden‘, height: ‘100%‘})
componentDidUpdate() {
const {isShowModel} = this.state
if (document.body && document.body.classList) {
if (isShowModel) {
document
.querySelectorAll(‘html‘)
.forEach(node => node.classList.add(‘open-model‘))
} else {
document
.querySelectorAll(‘html‘)
.forEach(node => node.classList.remove(‘open-model‘))
}
}
}
不足之处：弹窗消失后，页面会滚动到最顶部
第二种：弹窗蒙层下的页面不能滚动，同时，弹窗消失后，页面仍然停留在原位置，不会滚动到顶部
这就需要在弹窗出现时，保存此时的 scrollTop，即距离顶部的距离，在弹窗消失时，滚动到这个位置
代码示例（react）：
const toggleBodyPosition = isFixedPosition => {
const body = window.document.body
if (isFixedPosition) {
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0
body.style.position = ‘fixed‘
body.style.top = `-${scrollTop}px`
} else {
body.style.position = ‘‘
const top = -parseInt(body.style.top.replace(‘px‘, ‘‘))
window.scrollTo(0, top)
body.style.top = ‘‘
}
}
export default toggleBodyPosition
在弹窗组件中 import toggleBodyPosition
componentWillMount() {
toggleBodyPosition(true)
}
componentWillUnmount() {
toggleBodyPosition(false)
}
以上是关于移动端禁止弹窗蒙层下页面滚动的主要内容，如果未能解决你的问题，请参考以下文章