.scrollLeft()
원문 링크 
http://api.jquery.com/scrollLeft/
함수들
scrollLeft()
- scrollLeft()
scrollLeft( value )
- .scrollLeft( value )
개요 : 조건에 일치하는 요소들 중 첫번째 요소의 스크롤바의 수평 위치(x좌표)를 얻을 수 있습니다.
- .scrollLeft()
수평(가로) 스크롤의 위치는 픽셀 수치입니다. 스크롤바가 아주 왼쪽에 있거나 더이상 스크롤이 되지 않으며 그 수치는 0이 됩니다.
Note:
.scrollLeft()when called directly or animated as a property using.animate()will not work if the element(s) it is being applied to are hidden.
예 제
문단의 scrollLeft를 구해봅시다.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
</script>
</body>
</html>미리보기
0이 반환됬어요. 이 예제는 도대체 뭐죠 ㅡㅡㅋ
개요 : 조건에 일치하는 요소들의 수평 스크롤의 위치를 value값으로 세팅합니다.
- .scrollLeft( value )
- value 정수값
The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollLeft positions the horizontal scroll of each matched element.
위는 그리 중요한 내용은 아닌것 같은데 정확한 해석을 못하겠네요. 요는 scrollLeft 함수는 픽셀값으로 제어한다는 겁니다.
예 제
div의 스크롤을 움직여 볼까요.
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollLeft(300);
</script>
</body>
</html>
미리보기
보시는 것처럼 스크롤이 300만큼 움직였네요.
가끔 스크롤을 움직일 일이 있기도 한데 정말정말 가끔 필요할 수도 있겠네요. ㅎㅎ;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 감싼 요소 제거하기, unwrap() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - class 토글하기, toggleClass() (0) | 2011.11.22 |
| jQuery API 정복 - 텍스트만 알아내기, text() (5) | 2011.11.22 |
| jQuery API 정복 - 수직 스크롤 이동, scrollTop() (2) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceWith() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceAll() (2) | 2011.11.22 |
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |
| jQuery API 정복 - 클래스 제거, removeClass() (1) | 2011.11.22 |