Cancel page scrolling When the layer is ejected

Original address: http://www.cnblogs.com/leejersey/p/4173566.html

The child shoes that have made the projectile layer component should have considered special circumstances to cancel the page scroll bar, so that it can not scroll, so that the user experience will be much better, when the contents of the shell beyond the scope of the screen to add scroll bar to see the entire content.

First, remove the scroll bar method to add Overflow:hidden property to the body, IE6, 7 will not take effect, you need to add Overflow:hidden attributes to HTML
The style needs to IE6, 7 and other browsers with hack, this is because when the page is pulled below if the HTML or body is Overflow:hidden, the transparent shells below the page will be part of the normal hidden, through transparent to see a piece of gray, Specific colors related to the platform and user settings background color.
After the body or HTML has removed the scroll bar, the page will have a scroll bar width/2 bounce. This beat to the user experience is very bad, so give the body to add the right padding, the size of the scroll bar width. The width of the scroll bar under the Windows platform is inconsistent with the width of the scroll bars under the 17px,linux platform, and you can calculate the width of the scroll bar with the relevant code, for example, 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 style, if the HTML or body has inline style, you need to add, otherwise the original style will be emptied.

second, remove hidden dangers other ways to scroll the page (to prevent misoperation) hidden scroll bar, with the mouse wheel scrolling page does not move, thinking that this is OK, not ...
Keyboard shortcuts can also operate some of the browser operations, and scrolling pages related to, for example: Up and Down buttons, page keys and so on. For keyboard shortcuts, you need to cancel their default actions.

Add a pop-up layer style to add a global style to the body (compatible with IE6)

height:100%;

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