자바스크립트에서 제이쿼리을 사용하는 경우 스크롤의 좌우 위치를 이동하는 방법입니다. 어떻게 하면 좌우로 스크롤이 이동할 수 있는지 아래에서 알아봅니다.



# 제이쿼리 스크롤 좌우 이동하기, scrollLeft()
제이쿼리는 스크롤 관련 메소드를 제공합니다. 그 중에서 좌우 이동 방법으로 scrollLeft() 메소드를 사용할 수 있습니다. 아래는 간단한 문법입니다.

$(element).scrollLeft(value)

선택 가능한 값은 좌측을 기준으로 몇 픽셀에 위치할 것인지 value를 입력하면 됩니다. 만약 value가 없는 경우 현재의 스크롤 값을 가져와 출력하게됩니다. 현재 좌우 스크롤바 값을 구하는데도 사용할 수 있습니다.

그럼 간단한 예제를 만들어보겠습니다.


! scrollLeft() 예제보기
먼저 스크롤이 가능한 영역을 하나 만들어봅니다.
<div class="test" style="width:200px; overflow-x: scroll;">
  <div style="width:1000px;font-size: 20px;">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<button onclick="moveScrollLeft()">Left +100</button>

이제 만들어진 영역 아래에 버튼을 만들고 버튼을 클릭하면 100의 값 만큼 스크롤을 이동해보겠습니다.
moveScrollLeft = function() {
  var _scrollX = $('.test').scrollLeft();
  $('.test').scrollLeft(_scrollX + 100);
};



! 예제 코드 동작해보기
이제 위에 있는 코드를 실제로 만들고 동작해봅니다. 아래에서 버튼을 클릭하고 스크롤이 이동하는지 확인해보세요.
<div class="test" style="width:200px; overflow-x: scroll;">
<div class="scrolling" style="width:1000px;font-size: 40px;">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>
<button onclick="moveScrollLeft()">Left +100</button>
<script>
moveScrollLeft = function() {
var _scrollX = $('.test').scrollLeft();
$('.test').scrollLeft(_scrollX + 100);
};</script>

이제 버튼을 클릭하면 좌측으로 100만큼 이동할 것입니다.

위 예제코드를 잠깐 살펴볼까요? 나누어 알아보면 다음과 같습니다.

  • 스크롤 가능한 영역을 만들기 위해 엘리먼트에 overflow-x: scroll을 추가함
  • 클릭 이벤트 moveScrollLeft()를 등록하고 버튼을 클릭시 호출하도록 만듦
  • 현재 스크롤바 위치를 가져오고 여기에 100을 더함

여기까지 스크롤 좌우 이동 버튼 방법을 알아보았습니다.


! 우측이 아닌 좌측으로 이동하는 방법은?
만약 좌측으로 이동하려면? 이때는 값이 +가 아닌 -값을 추가하면 됩니다. 예를들어 위 코드는 +100이 아니라 -100을 주게되면 좌측으로 100만큼 이동하게되겠죠.