Mobile-side mask layer prevents scrolling and prevents penetration from slipping

Mobile phones now often have full-screen pop-up windows or masks like apps, but there's a tricky problem:

When a scrollbar is located at the bottom of a pop-up window or mask, the sliding window or mask scrolls the underlying content at the same time, i.e. through sliding.

How to prevent penetration slip?

The first method, when the pop-up window is displayed, removes the scroll bar at the bottom, and displays the scroll bar again when the pop-up window is closed.

// Show Pop -up Windows $ ('. Js-popup '). Click (function() {    $ ('. Mask '). Show (    ); var wheight = $ (window). Height ();    $ (' HTML '). css ({' Height ': wheight, ' overflow ': ' Hidden '});    $ (' body '). css ({' Height ': wheight, ' overflow ': ' Hidden '}) ; // Close the pop -up window $ ('. Js-close-popup '). Click (function() {    $ (' html,body '). Removeattr (' Style ');    $ ('. Mask '). Hide ();})

However, this will have a problem when the scrollbar is removed and the content is returned to the top. For the user, this must be a bad design. User feedback said, which idiot design?

In order to idiot the wrong, we had to rack our brains. In fact, you can record where the pop-up window is, scroll where it is, and then reset the scroll bar when you close the pop-up window.

//Show pop -up window$ ('. Js-popup '). Click (function() {window.lastscrolltop= STop = Document.body.scrollTop | |Document.documentElement.scrollTop; $('. Mask '). Show (); varWheight =$ (window). Height (); $(' HTML '). css ({' Height ': wheight, ' overflow ': ' Hidden ')}); $(' body '). css ({' Height ': wheight, ' overflow ': ' Hidden ')});});//Close the pop -up window$ ('. Js-close-popup '). Click (function(){    $(' Html,body '). Removeattr (' style '));    $ (window). scrolltop (Window.lastscrolltop); $('. Mask '). Hide ();})

The second method, using Iscroll.js, controls scrolling by CSS3 transform

var New true, click:True});

However, using iscroll.js also has a problem that affects elements within the form, such as input cannot be entered, files cannot be selected, and so on.

For the time being only these two options, the implementation of the project, both scenarios will be used, there is input of the pop-up window, using the first type, no pop-up window, the second type.

Mobile-side mask layer prevents scrolling and prevents penetration from slipping