Mobile Stop page Scrolling under the pop-up mask

The first simple method: When the popup window appears, add class to the HTML:. Open-model {Overflow:hidden;　　height:100%; When the pop-up window disappears, remove the class  code example (react): Import react from ' react ' import {CSS} from ' Glamor '   css.global ('. Open-mo Del ', {overflow: ' hidden ', Height: ' 100% '})   Componentdidupdate () {const {Isshowmodel} = this.state if (docum　　　　　　　　　　Ent.body && document.body.classList) {if (Isshowmodel) {document. queryselectorall (' HTML ') . ForEach (node = node.classList.add (' Open-model '))} else {document. queryselectorall (' H Tml '). ForEach (node = node.classList.remove (' Open-model ')}}}  deficiency: When the pop-up window disappears, the page scrolls to the top  &nbs P; Second: the page under the mask can not scroll, at the same time, the pop-up window disappears, the page still stays in the original position, will not scroll to the top this needs to be in the pop-up window, save the scrolltop at this time, that is, distance from the top, when the pop-up window disappears, scroll to this position   code example (REACT): const Togglebodyposition = Isfixedposition = = Const BODY = window.document.body  if (isfixedpositi 　　　　　　ON) {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)} in pop-up window assembly Componentwillunmount () {togglebodyposition (FALSE)}

Mobile Stop page Scrolling under the pop-up mask