Mobile Body Settings Overflow:hidden The page will scroll up after the expiration and setup.

Recently in the writing of a multi-pop window page, found that when the pop-up window appears when the bottom page will be scrolling through the phenomenon, so think of when the pop-up window display and hide the JS dynamic Control body Overflow property values, that is

$ ("Body"). CSS ("Overflow", "hidden"); $ ("body"). CSS ("Overflow", "visible");

In the browser-side debugging is able to achieve the desired effect, the results in the mobile side whether iOS or Android system are not valid, in the degree Niang view of the predecessors of the relevant blog learned that this is a mobile browser features, to solve this problem online there are three ways

1.body plus position:fixed;width:100%;height:100%; 2. Add a parent to the element you want to scroll, set the height, Overflow:auto3.html,body{height:100%;overflow:hidden}

I used the third method, proved to be very effective, but at this time there is another problem, when the pop-up window is the body is forbidden to scroll when the first scroll to the top, so if the user triggers the popup event element position at the bottom of the page, then the experience is very bad, My workaround is to get the page scrolling position when the page is blocked, allowing the page to scroll to its original location

get page scroll position var scrolltotop=$ (window). scrolltop; Set page scroll position $ (' body,html '). scrolltop (Scrolltotop);

At the very beginning, I used $ (' body '). ScrollTop (Scrolltotop) sets the position of the page scrolling, the results found invalid, with $ (' html '). ScrollTop (scrolltotop) is valid, in order to prevent accidents, End use of the above method

Mobile Body Settings Overflow:hidden The page will scroll up after the expiration and setup.