JS popup layer mask, hide background page scroll bar detail optimization

Children's shoes that have been laminated components should be considered in special cases to remove the page scroll bar, so that it can not scroll, so that the user experience is much better, when the content of the layer beyond the scope of the screen to add scroll bar above the layer to see the whole content.

First, the method of removing the scroll bar
Add the Overflow:hidden property to the body, IE6, 7 will not take effect, you need to add Overflow:hidden property to HTML
The style needs to IE6, 7 and other browsers with hack identification, this is because when the page is pulled down, if the HTML or body is Overflow:hidden, the bottom of the transparent layer of the page will be partially normal to hide, through the transparent view of a piece of gray, The specific color is related to the platform and user setting background color.
Body or HTML after removing the scrollbar, the page will have a scroll bar width/2 bounce! This beat is very bad for the user experience, so add the right padding to the body, and the size is the width of the scroll bar. The width of the scroll bar under the Windows platform is inconsistent with the different scroll bar widths of the 17px,linux platform, and you can calculate the width of the scrollbar with the relevant code, for example in the Windows platform.
Related code:

Document.documentElement.style.cssText = ' overflow:none;+overflow:hidden;_overflow:hidden; ';
Document.body.style.cssText = ' overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0; ';

The above code does not consider whether the HTML or body has inline styles, and if the HTML or body has inline styles it needs to accumulate, otherwise it will empty the original style.

Second, remove the hidden trouble other ways to scroll the page (to prevent accidental operation)
After hiding the scroll bar, scrolling the page with the mouse wheel does not move, thinking this is OK, not ...
Keyboard shortcuts can also manipulate some of the browser's actions, related to scrolling pages, such as: Up and Down buttons, paging buttons and so on. For keyboard shortcuts, you need to cancel their default actions.

Third, add pop-up layer style
Add global style to body (compatible with IE6)

height:100%;

To add a scrolling style to a bullet layer
Overflow-y: auto;
width:100%;
height:100%;
left:0;
_padding:0      17px 0 0; Ie6bug, the padding of the parent element is still valid after the child element is absolutely positioned

JS popup layer mask, hide background page scroll bar detail optimization