jQuery 입문 | 요소의 영역 | 요소의 스크롤 위치 .scrollLeft() .scrollTop()

Tags:

요소의 스크롤 위치

jQuery는 선택한 요소의 스크롤 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다.

메소드 설명
.scrollLeft() 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
.scrollTop() 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.

.scrollLeft() 메소드와 .scrollTop() 메소드

.scrollLeft() 메소드는 선택한 요소의 수평 스크롤 바의 현재 위치를 반환하거나, 해당 요소의 수평 스크롤 바의 위치를 설정한다.
그리고 .scrollTop() 메소드는 선택한 요소의 수직 스크롤 바의 현재 위치를 반환하거나, 해당 요소의 수직 스크롤 바의 위치를 설정한다.

아래 예제는 선택한 요소의 스크롤 바의 위치를 반환하는 예제이다.

$("button").on("click", function(){
  var left = $(".box").scrollLeft();
  var top = $(".box").scrollTop();
  $("span").text("Left:" + left + ", Top" + top);
});

코드 실행

아래 예제는 선택한 요소의 스크롤 바의 위치를 설정하는 예제이다.

$("button").on("click", function(){
  $(".box").scrollLeft(70);
  $(".box").scrollTop(20);

  var left = $(".box").scrollLeft();
  var top = $(".box").scrollTop();
  $("span").text("Left:" + left + ", Top" + top);
});

코드 실행

스크롤 바의 위치 정보를 실시간 구하기

.on('scroll', function(){...}) 메소드를 사용하면 스크롤 바의 위치 정보를 실시간으로 구할 수 있다.

아래 예제는 선택한 요소의 스크롤 바의 위치 정보를 실시간으로 구하는 예제이다.

$(".box").on('scroll', function(){
	  var left = $(this).scrollLeft();
    var top = $(this).scrollTop();
    $("span").text("Left:" + left + ", Top" + top);
});

코드 실행




최종 수정 : 2021-08-27