scroll() 이벤트 메서드
대상 요소의 스크롤바가 이동할 때마다 이벤트를 발송 시키거나 강제로 scroll이벤트를 발생시키는데 사용
기본형
1) scroll 이벤트 등록
$("이벤트 대상 선택").scroll(function () {
자바스크립트 코드;
});
$("이벤트 대상 선택").on("scroll", function () {
자바스크립트코드;
});
2) scroll 이벤트 강제 발생
$("이벤트 대상 선택").scroll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function () {
$(window).on('scroll', function() { // 윈도 창을 기준
let scrollTop = $(this).scrollTop(); // 선택한 요소의 스크롤바 수직 위치를 반환
let scrollLeft = $(this).scrollLeft(); // 선택한 요소의 스크롤바 수평 위치를 반환
$('.top').text(scrollTop);
$('.left').text(scrollLeft);
});
});
</script>
<style>
body { height: 10000px; width: 5000px;}
#wrap { position: fixed; left: 10px; top: 10px;}
</style>
</head>
<body>
<div id="wrap">
<p>scrollTop : <span class="top">0</span>px</p>
<p>scrollLeft : <span class="left">0</span>px</p>
</div>
</body>
</html>
