2002 년에 널리 생산되었으며 현재 우리나라의 주류 인 IE6 브라우저는 CSS2의 고정 포지셔닝 속성을 지원하지 않습니다.
1. 일반 JS에 대한 해결책
이것은 예를 들어 가장 오래되고 널리 사용됩니다. 단점은 드래그 스크롤 막대 요소가 스무딩을 통해 개선 될 수 있지만 여전히 이상적이지 않다는 것입니다. 그러나이 솔루션은 시각적 효과가 약간 열악하지만 안정성은 언급되지 않는다고 말하는 것이 중요합니다.
2. HTML 구조 및 레이아웃 시뮬레이션 방법을 사용하십시오
이 솔루션은 163 블로그에 의해 적용되었다. 163은 모든 컨텐츠를 100% 인 컨테이너에 넣고 스크롤 막대가 자동으로 설정된 다음이 절대 포지셔닝 레이어를 정적으로 설정할 수 있도록합니다. 상태 . 원리 : 드래그 스크롤 바는 전체 페이지가 아니라 전체 페이지를 시뮬레이션하는 컨테이너이므로 컨테이너 외부의 장소는 "여전히"입니다. 상세한:
다음은 인용 된 내용입니다. <! doctype html public "-// w3c // dtd xhtml 1.0 전환 // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<스타일>
*{마진 : 0}
몸{
높이 : 1000px;
너비 : 1000px;
}
#에이{
너비 : 300px;
높이 : 100px;
배경 : 빨간색;
}
</스타일>
<cript>
var isie6 = window.xmlhttprequest? false : true;
Window.onload = function () {
var a = document.getElementById ( 'a');
var d = document.getElementById ( 'd');
if (isie6) {
a.style.position = '절대';
window.onscroll = function () {
D.innerhtml = '';
}
}또 다른{
a.style.position = '고정';
}
a.style.right = '0';
a.style.bottom = '0';
}
</스크립트>
</head>
<body>
<div id = "d"style = "display : none;"> </div>
<div id = 'a'> 테스트 </div>
</body>
</html> |
여기서 시각적 효과는 완벽합니다. 세 가지 문제가 있습니다.
1. HTML 구조를 변경해야합니다 (이 항목은 설명되지 않음).
2. 사용자 경험을 파괴 : 이전 에이 방법을 시도했지만 페이지를 새로 고치면 스크롤 막대가있는 곳에 머물지 않아 견딜 수 없습니다.
3. JS의 일부 이벤트를 파괴하면 CloudGamer는 Windows의 스크롤 이벤트를 파괴 할 것이라고 언급했습니다.
3. 화성에 대한 전례없는 "청산 방법"솔루션
원칙은 정말 기괴하고 설명 할 수 없으며 응용 프로그램 제한이 너무 큽니다. 예를 참조하십시오 :
다음은 인용 된 내용입니다. <! doctype html public "-// w3c // dtd xhtml 1.0 전환 // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<스타일>
*{마진 : 0}
몸{
높이 : 1000px;
너비 : 1000px;
}
#에이{
너비 : 300px;
높이 : 100px;
배경 : 빨간색;
}
</스타일>
<cript>
var isie6 = window.xmlhttprequest? false : true;
Window.onload = function () {
var a = document.getElementById ( 'a');
var d = document.getElementById ( 'd');
if (isie6) {
a.style.position = '절대';
window.onscroll = function () {
D.innerhtml = '';
}
}또 다른{
a.style.position = '고정';
}
a.style.right = '0';
a.style.bottom = '0';
}
</스크립트>
</head>
<body>
<div id = "d"style = "display : none;"> </div>
<div id = 'a'> 테스트 </div>
</body>
</html> |
4. 구식 기술에 대한 새로 사용 된 표현 및 고정 된 배경 솔루션
이 솔루션은 시각적으로 정적 위치를 완벽하게 실현할 수 있습니다. 예:
CloudGamer : Alertbox 팝업 레이어 (정보 프롬프트 박스) 효과
나의 이전 : "간단한 전체 화면 투명 마스크 (Lightbox) 솔루션"
