JS 팝업 레이어 마스크, 배경 페이지 스크롤 막대 세부 정보 숨기기 최적화 분석_javascript 기술

1. 스크롤바 없애는 방법

overflow:hidden 속성을 본문에 추가하면 됩니다. IE6 및 7에서는 적용되지 않습니다. html에 Overflow:hidden 속성을 추가해야 합니다

IE6, 7 및 기타 브라우저에 대한 해킹을 사용하여 스타일을 식별해야 합니다. 이는 페이지를 풀다운할 때 html 또는 body가 Overflow:hidden이면 투명 팝업 레이어 아래의 페이지가 부분적으로 표시되기 때문입니다. 정상적으로 숨겨져 있습니다. 투명도를 통해 표시되는 회색조는 플랫폼과 사용자가 설정한 배경색과 관련이 있습니다.

본문이나 HTML에서 스크롤 막대를 제거하면 페이지에 스크롤 막대 너비/2 점프가 적용됩니다! 이 점프는 사용자 경험에 매우 좋지 않으므로 본문에 오른쪽 패딩을 추가합니다. 크기는 스크롤 막대의 너비입니다. Windows 플랫폼에서 스크롤 막대의 너비는 17px입니다. Linux 플랫폼에서는 스크롤 막대의 너비가 서로 다릅니다. 다음은 Windows 플랫폼에서 스크롤 막대의 너비를 계산하는 데 사용할 수 있습니다. 예를 들어.

관련 코드:

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;';

위 코드는 html 또는 body에 인라인 스타일이 있는지 여부를 고려하지 않습니다. html이나 body에 인라인 스타일이 있으면 이를 누적해야 하며, 그렇지 않으면 원래 스타일이 지워집니다.

2. 페이지를 스크롤하여 숨겨진 위험을 제거하는 다른 방법(오용 방지)

스크롤바를 숨긴 후 마우스 휠로 스크롤하면 페이지가 움직이지 않는데요..

키보드 단축키는 위쪽 및 아래쪽 키, 페이지 넘기기 키 등 페이지 스크롤과 관련된 일부 브라우저 작업을 작동할 수도 있습니다. 키보드 단축키의 경우 기본 작업을 취소해야 합니다.

3. 팝업 레이어 스타일 추가

본문에 전역 스타일 추가(IE6과 호환)

높이:100%;

elastic 레이어에 스크롤 스타일 추가

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

위의 JS 팝업 레이어 마스크, 숨겨진 배경 페이지 스크롤 막대 세부 정보 최적화 분석은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 또한 스크립트 홈도 지원해 주시길 바랍니다.