1. Method for removing scroll bars
Just add the overflow:hidden attribute to the body. It will not take effect under IE6 and 7. You need to add the overflow:hidden attribute to the html
In the style, IE6, 7 and other browsers need to be distinguished by hack. This is because when the page is pulled below, if the html or body is overflow:hidden, the page under the transparent bulb layer will be partially hidden normally. The grayscale visible through transparent viewing, the specific color is related to the background color set by the platform and user.
After removing the scrollbar in body or html, the page will have a scrollbar width/2 jump! This jump is very bad for the user experience, so add a right padding to the body, the size is the width of the scroll bar. The width of the scroll bar under the Windows platform is 17px. The width of the scroll bars of different scrollers under the Linux platform is inconsistent. You can use relevant code to calculate the width of the scroll bar. The following is an example of 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, it needs to be accumulated, otherwise the original style will be cleared.
2. Other methods to remove hidden dangers scroll the page (prevent misoperation)
After hiding the scrollbar, scrolling the page with the mouse wheel will not move. I thought it was OK, not...
Keyboard shortcuts can also operate some browser operations, related to scrolling pages, such as: up and down keys, page turn buttons, etc. For keyboard shortcuts, they need to be cancelled.
3. Add pop-up layer style
Add global style to body (compatible with IE6)
height:100%;
Add scrolling style to the bullet layer
overflow-y: auto;width: 100%;height: 100%;left:0;_padding:0 17px 0 0; //IE6 bug, the padding of the parent element is still valid after the child element is absolutely positioned
The above article on the JS pop-up layer mask and hidden background page scroll bar details optimization analysis is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.