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

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

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

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

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

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

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

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

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

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

// 출력 결과
// 수평 스크롤 위치: 200

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

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

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

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

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