2002년에 생산되어 현재 우리 나라의 주류인 IE6 브라우저는 CSS2의 고정된 위치 지정 속성을 지원하지 않는다는 것은 잘 알려진 사실입니다. 이러한 이유로 고민에 빠진 프런트엔드 엔지니어들은 다양한 솔루션을 고안했습니다.
1. 기존 js 솔루션
이는 가장 오래되고 널리 사용되는 방법입니다. 예를 들어 스크롤 막대를 따라가는 많은 커플 광고에서 이 솔루션을 사용합니다. 단점은 드래그 스크롤 막대 요소가 매우 심하게 흔들리는 것입니다. 스무딩을 통해 개선할 수 있지만 효과는 여전히 이상적이지 않습니다. 하지만 제가 말씀드리고 싶은 것은 이 솔루션의 시각적 효과는 조금 떨어지더라도 안정성은 말할 것도 없다는 것입니다.
2. HTML 구조 및 레이아웃 시뮬레이션 방법 사용
이 솔루션은 한때 163 Blog에서 사용되었습니다. 163은 높이가 100%이고 스크롤 막대가 자동으로 설정된 컨테이너에 모든 콘텐츠를 넣은 다음 그 아래에 절대 위치 레이어를 설정하여 절대 위치 레이어가 정적 상태. 원리: 드래그하는 스크롤 막대는 드래그하는 전체 페이지가 아니라 전체 페이지를 시뮬레이션하는 컨테이너이므로 컨테이너 외부 영역은 "고정"됩니다. 상세한:
인용된 내용은 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<스타일>
*{여백:0}
몸{
높이:1000px;
너비:1000px;
}
#에이{
너비:300px;
높이:100px;
배경:빨간색;
}
</style>
<스크립트>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = 함수(){
var a = document.getElementById('a');
var d = document.getElementById('d');
만약(isie6){
a.style.position = '절대';
window.onscroll = 함수(){
d.innerHTML = '';
}
}또 다른{
a.style.position = '고정';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<본문>
<div id="d" style="display:none;"></div>
<div id='a'>테스트</div>
</body>
</html> |
시각적 효과는 완벽하지만 세 가지 문제가 있습니다.
1. HTML 구조를 변경해야 합니다. (이 항목은 설명하지 않습니다.)
2. 사용자 경험을 파괴합니다. 이전에 이 방법을 시도했지만 페이지를 새로 고칠 때 스크롤 막대가 제자리에 유지되지 않아 참을 수 없습니다.
3. Cloudgamer가 언급한 창의 스크롤 이벤트와 같은 일부 js 이벤트를 삭제합니다. 여기서는 최소한 N개의 캡슐화된 js 구성 요소가 무효화될 수 있습니다.
3. 화성법을 이용한 전례 없는 '클리어 방식' 솔루션
원리가 너무 이상해서 설명할 수 없고 적용 범위도 너무 제한적입니다. 예를 보려면 다음을 참조하세요.
인용된 내용은 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<스타일>
*{여백:0}
몸{
높이:1000px;
너비:1000px;
}
#에이{
너비:300px;
높이:100px;
배경:빨간색;
}
</style>
<스크립트>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = 함수(){
var a = document.getElementById('a');
var d = document.getElementById('d');
만약(isie6){
a.style.position = '절대';
window.onscroll = 함수(){
d.innerHTML = '';
}
}또 다른{
a.style.position = '고정';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<본문>
<div id="d" style="display:none;"></div>
<div id='a'>테스트</div>
</body>
</html> |
4. 기존 기술의 새로운 활용을 위한 표현 플러스 고정 배경 솔루션
이 솔루션은 시각적으로 정적 위치 지정을 완벽하게 달성할 수 있습니다. 예:
cloudgamer: AlertBox 팝업 레이어(정보 프롬프트 상자) 효과
내 이전: "간단한 전체 화면 투명 마스크(lightBox) 솔루션"
