JS pop-up layer mask, hide background page scroll bar details optimization analysis_javascript skills

1. How to remove the scroll bar

Just add the overflow:hidden attribute to the body. It will not take effect in IE6 and 7. You need to add the overflow:hidden attribute to the html

The style needs to be identified using hacks for IE6, 7 and other browsers. This is because if the html or body is overflow:hidden when the page is pulled down, the page under the transparent pop-up layer will be partially hidden normally. Through transparency The gray scale you see is related to the background color set by the platform and the user.

After removing the scroll bar from the body or html, the page will have a scroll bar width/2 jump! This jump is very bad for the user experience, so add right padding to the body, the size of which is the width of the scroll bar. The width of the scroll bar under the Windows platform is 17px. The width of the scroll bar is different for different scrollers under the Linux platform. You can use the relevant code to calculate the width of the scroll bar. The following takes the Windows platform as an example.

Related codes:

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 html or body has inline styles. If html or body has inline styles, they need to be accumulated, otherwise the original styles will be cleared.

2. Other ways to remove hidden dangers by scrolling the page (to prevent misuse)

After hiding the scroll bar, the page will not move when scrolling with the mouse wheel. I thought this was ok, but no...

Keyboard shortcuts can also operate some browser operations related to scrolling pages, such as up and down keys, page turning keys, etc. For keyboard shortcuts, their default actions need to be canceled.

3. Add popup layer style

Add global style to body (compatible with IE6)

height:100%;

Add scrolling style to the elastic layer

overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0;   //IE6bug，子元素绝对定位后对于父元素的padding依然有效

The above JS popup layer mask, hidden background page scroll bar details optimization analysis is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support Script Home.