scroll
원문 링크 
http://api.jquery.com/scroll/
개요 : "scroll" JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다.
- .scroll( handler(eventObject) )
- handler(eventObject) 이벤트가 발생하면 실행될 기능.
- .scroll( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 맵.
- handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
- .scroll()
이 함수의 첫번째, 두번째 용법은 .bind('scroll', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('scroll') 를 줄여 표현한 것입니다.
scroll 이벤트는 스크롤이 움직일 때 발생합니다. 이것은 window 객체에서 제공됩니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다..
아래 HTML 을 예로 보겠습니다.
<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
내용이 표현되기에 영역이 작기 때문에 아래 이미지처럼 스크롤이 생기게 됩니다.
scroll 이벤트 핸들러는 아래처럼 요소에도 바인딩할 수 있습니다.
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});스크롤을 위 아래로 움직이면 <div id="log"></div> 코드가 추가되게 됩니다.
이벤트를 수동으로 발생시키기 위해서는 .scroll() 함수를 인자없이 바인딩해야 합니다.
$('#other').click(function() {
$('#target').scroll();
});이 코드가 실행되면 Trigger the handler 을 클릭해도 스크롤 이벤트가 실행되어 위 메세지가 추가되게 됩니다.
scroll 이벤트는 스크롤의 위치가 바뀌면 발생하게 됩니다. 마우스 클릭 또는 스크롤바 위에서 드래그, 요소 안에서의 드래그, 방향키로 스크롤, 마우스 휠로 스크롤 하는 형태에서 모두 이벤트가 발생됩니다.
예 제
페이지를 스크롤하면 발생하는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
p { color:green; }
span { color:red; display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
<script>
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});
</script>
</body>
</html>미리보기
스크롤하면 메시지가 계속 추가되어 나타납니다.
스크롤 이벤트를 잡아낼 경우가 많지는 않지만 나름 필요할 때가 있겠네요. 개똥도 쓸라면 없는데 이 정도면 뭐 ^^;;;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| trigger(), 함수 실행시키기 (0) | 2012.03.20 |
|---|---|
| toggle(), 토글하기 (0) | 2012.03.09 |
| submit(), 폼 전송 이벤트 (1) | 2012.03.09 |
| select(), 텍스트 드래그 이벤트 (2) | 2012.03.09 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |