반응형
길게 말할거 없이 예제를 보도록 하자
시나리오
1. 스크롤위치를 기억하기 위해서 쿠기를 사용.
2. 현재 사용중인 엘리멘터의 스크롤 위치값은 .scrollTop 으로 Y값의 위치를 확인
3. 뒤로 돌아갔다 오더라도 쿠기의 스크롤바 위치 값을 가지고 해당 위치로 다시 보내준다.
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>반응형
'JavaScript > script' 카테고리의 다른 글
| javascript 이미지 미리보기 (0) | 2016.03.30 |
|---|---|
| JavaScript Boolean Object (0) | 2012.07.19 |
| javascript Date getTimezoneOffset() (0) | 2011.11.10 |
| form parameter submit 전에 javascript 확인. (0) | 2011.11.07 |
| javascript 정규표현식 (Regular Expression) (0) | 2011.04.18 |