jQuery .scrollTop() 메서드: 요소의 수직 스크롤 위치 가져오기 및 설정하기

.scrollTop() 메서드는 요소의 수직 스크롤 위치를 가져오거나 설정하는 데 사용됩니다. 이를 통해 요소 내부의 세로 스크롤 위치를 관리할 수 있습니다. 아래 예제들을 통해 .scrollTop() 메서드의 활용 방법을 살펴보겠습니다.

예제 1: 요소의 수직 스크롤 위치 가져오기

// 요소의 수직 스크롤 위치 가져오기 예제
var scrollTop = $("#scrollableElement").scrollTop();

// 수직 스크롤 위치 출력
console.log("수직 스크롤 위치:", scrollTop);

// 출력 결과
// 수직 스크롤 위치: 100

결과: #scrollableElement 요소의 수직 스크롤 위치가 100으로 출력됩니다.

예제 2: 요소의 수직 스크롤 위치 설정하기

// 요소의 수직 스크롤 위치 설정하기 예제
$("#scrollableElement").scrollTop(150);

// 설정된 수직 스크롤 위치 확인
console.log("수직 스크롤 위치:", $("#scrollableElement").scrollTop());

// 출력 결과
// 수직 스크롤 위치: 150

결과: #scrollableElement 요소의 수직 스크롤 위치가 150으로 설정되고 확인됩니다.

예제 3: 요소 내부에서 이벤트 발생 시 수직 스크롤 위치 가져오기

// 요소 내부에서 이벤트 발생 시 수직 스크롤 위치 가져오기 예제
$("#scrollableElement").on("scroll", function() {
    // 수직 스크롤 위치 가져오기
    var scrollTop = $(this).scrollTop();
    console.log("수직 스크롤 위치:", scrollTop);
});

// 출력 결과
// 요소 내부에서 스크롤할 때마다 수직 스크롤 위치가 콘솔에 출력됨

결과: #scrollableElement 요소 내부에서 스크롤할 때마다 수직 스크롤 위치가 콘솔에 출력됩니다.