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

標籤：toggle   foreach   date   slist   add   one   efault   com   query   

第一種簡單的方法：在彈窗出現時，在 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 toggleBodyPositioncomponentWillMount() {　　toggleBodyPosition(true)} componentWillUnmount() {　　toggleBodyPosition(false)}

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