Disable scrolling when adding masks

Write pages often encounter a pop-up layer, in order to highlight the pop-up layer, usually set up a mask

<Div class="Mask"></div    >

The style of the matte layer is:

. mask{
    width:100%;
    height:100%;
    Background:rgba (0, 0, 0, 0.8);
    position:fixed;
    top:0;
    left:0;
    z-index:998;
    Display:none;
}

< Span style= "color: #66ff66;" > But then there's a problem, Even if the mask layer is set to the same width as the screen, but a wheel or manual when the bottom of the page, such as more than one screen will still roll, if prohibited? 
 Does the classmate say this is not easy? Just set the body to 100% high Overflow:hidden. 
 
 The following code:          

document.body.style.overflow= ' hidden ';

document.body.style.height= ' 100% ';

In Chrome, a try, sure enough, not motionless ah, it's amazing, isn't it? But not in the chrome test Ah, we have to consider someone using Firefox AH QQ AH open gate Ah, in Firefox, a try, page can also roll, really frown, forced to continue to search, see there is no ideas, and students said that the scroll bar set to No, but set to no just not display does not mean that the page does not roll,< Span style= "color: #7cb7ef;" >< Span style= "color: #00ff33;" > Also Some say you can listen to the event scrolling when you change the value of Scrooltop to 0, 
            

　　window.onscroll= function (){  　　  document.body.scrollTop = 0 　　}

Tried a bit seems to be useless ah (perhaps the mobile phone side of the event and computer-side different reasons), suddenly think that since the Chrome line, Firefox can not be compatible with the problem, so wrote a plus:

document.body.style.overflow= ' hidden ';

document.body.style.height= ' 100% ';

document.documentelement.style.overflow= ' hidden '

Try Firefox also OK, the original is really compatibility problem, but our project is used in, but also in the test,
It is said to call the browser, if the phone installed QQ browser will call QQ browser, if not the call system comes with, in a test, you can prohibit scrolling, but in the release of the failure, the other browser can be released after the normal scrolling, recovery to the status of no popup layer, is the page more than one screen can be scrolled, But after release, it is not possible to scroll.
What can be done, naught? We can only check again, finally found, in Touchmove< Span style= "color: #7cb7ef;" >< Span style= "color: #00ff33;" >               

 document.addeventlistener (' Touchmove ', function (event) {
 
 Event.preve Ntdefault (); 
 
})  

 < Span style= "color: #7cb7ef;" >< Span style= "color: #000000;" > I just need to disable when the mask pops up and release when the mask is off, so I changed the code: 
           

var abtn=$ (' #a1 ');      Click the button
var guide=$ ('. Guide ');  Pop-up mask layer
var flag=0;  //logo, initially 0
Abtn.tap (function () {
    Guide.css (' Display ', ' block ');  Show Matte
    flag=1;

});
Document.addeventlistener (' Touchmove ', function (event) {//Listen for scrolling events
    if (flag==1) {//judgment is performed when masking is displayed, no scrolling
        Event.preventdefault (); The most critical sentence, prohibit browser default behavior
    }
})
Guide.tap (function () {
    Guide.css (' Display ', ' none '); Hide Masks
    flag=0; Reset to 0
});

Here I used the Zepto.js library, and then measured the next, Firefox, CHROME,OPERA,QQ, the system default browser and, can be executed, the cost of a few hours finally fix

Disable scrolling when adding masks