관리 메뉴

IT.FARMER

javascript 스크롤바 위치 기억 본문

JavaScript/script

javascript 스크롤바 위치 기억

아이티.파머 2011. 11. 14. 11:17
반응형
 
 
 
길게 말할거 없이 예제를 보도록 하자 
 
시나리오 
1. 스크롤위치를 기억하기 위해서 쿠기를 사용. 
2. 현재 사용중인 엘리멘터의 스크롤 위치값은 .scrollTop 으로 Y값의 위치를 확인 
3. 뒤로 돌아갔다 오더라도 쿠기의 스크롤바 위치 값을 가지고 해당 위치로 다시 보내준다.
 
<html>
<head>
<title>Fun Scroll</title>
<style type="text/css">
#divTest{width:150px;height:200px;overflow:auto}
</style>
<script type="text/javascript">
window.onload = function(){
 var strCook = document.cookie;
 //alert(strCook);
 if(strCook.indexOf("!~")!=0) {
 var intS = strCook.indexOf("!~");
 var intE = strCook.indexOf("~!");
 var strPos = strCook.substring(intS+2,intE);

        //alert("strCook=" +strCook + "\n\n"+ intS +"/"+ intS +"/"+strPos);
 document.getElementById("divTest").scrollTop = strPos;
 }
}
function SetDivPosition(){
 var intY = document.getElementById("divTest").scrollTop;
 document.title = intY;
 document.cookie = "yPos=!~" + intY + "~!";
}

/*
var a = 'this';
var reg = /t/gi;

alert(reg.test(a));
alert(reg.test(a));
alert(reg.test(a));*/

</script>
</head>
<body>

<div id="divTest" onscroll="SetDivPosition()">
 1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
 11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>
 1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
 11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> ERIC<br/> 1<br/>1<br/>
 1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
 11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>
 1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
 11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>
 </div>
 </body>
</html>
반응형