移動端禁止彈窗蒙層下頁面滾動

第一種簡單的方法：

在彈窗出現時，在 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)

}