반응형
Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- Hibernate
- Selenium
- jmeter
- Netty
- vue.js
- coalesce
- ChannelPipeline
- docker compose mysql
- WebLogic
- spring boot redis
- argo cd
- spring cloud
- MySQL
- KAFKA
- Spring Open Feign
- grafana
- redis
- weblogic 10
- Airflow
- mybatis
- Redis Sentinel
- netflix oss
- Docker Compose
- docker
- RabbitMQ
- docker-compose
- spring boot
- cassandra
- JPA
- QueryDSL
Archives
- Today
- Total
IT.FARMER
javascript 스크롤바 위치 기억 본문
반응형
길게 말할거 없이 예제를 보도록 하자
시나리오
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 |