JavaScript 횡 이동 스크롤 만들기

Web을 만들다보면 아래와 같은 횡 이동 스크롤을 만들 때가 있습니다. 많은 컨텐츠를 보여주기 위함으로 사용되죠.

 

오늘은 뭘 볼까

물론 Bootstrap에 Carousel이라는 훌륭한 방법이 존재합니다만 저는 이걸 Pick하지 않았어요 !

 

저는 그리고 마우스로 딱 잡고 이동하는걸 원했거든요. 마치 휴대폰으로 슬라이딩하는 것처럼요 !

 

근데 이게 생각보다 쉽지 않습니다. 흑흑

 

그래서 한 번 JQuery를 사용해봤습니다.

 

우선 html 코드를 봅시다.

<div id="scroll" class="scrollmenu">
  {% for view in view_list %}
    <div>
      <p class="mb-0"> <!-- image -->
        <a href="{% url %}">
        	<img class="thum-img mb-2" src={{  }}>
        </a>
      </p>
      <p> <!-- title -->
      	<a class="text-white video-font" href="{% url %}">{{  }}</a>
      </p>
    </div>
  {% endfor %}
</div>

Django Template Language를 사용하여, 필요한 data를 가져왔다고 칩시다. 

 

그렇다면 안에 div 내용물들이 많이 생기겠죠?

 

그걸 제일 최상단 div로 감쌌습니다. id는 scroll이고, class는 scrollmenu인 div로요

 

그리고 이를 이용하여 JQuery를 이용해서 mouse drag scroll을 만들었습니다.

var x,left,down;

$("#scroll").mousedown(function(e){
  e.preventDefault();
  down = true;
  x = e.pageX;
  left = $(this).scrollLeft();
});

$("body").mousemove(function(e){
  if(down){
    var newX = e.pageX;
    $("#scroll").scrollLeft(left - newX + x);
  }
});

$("body").mouseup(function(e){down = false;});

mousedown API의 경우엔 저희가 마우스를 클릭~~~~~~ 중인 상태입니다. 꾸욱 누르고 있을 때를 말합니다.

 

function 변수에 있는 e는 event의 변수로서 앞서 말한 mousedown event가 일어날 때, 이용할 넘겨받는 event 변수입니다.

 

그 순간 down이라는 변수를 true로 바꿔서 마우스를 클릭 중이다를 알리고, 현재 x변수에 스크롤의 위치(event 객체 안에 있는 pageX는 X축의 위치를 나타냅니다. 물론 pageY도 있습니다. 즉, mousedown이 된 순간의 커서 위치를 찾을 수 있다는 뜻입니다)를 저장해놓습니다.

 

이해가 안된다면 아래를 참고하세요 !

https://api.jquery.com/event.pageX/

event.pageX | jQuery API Documentation

 

그리고 mousemove API를 통해서 커서가 움직이나 안 움직이나를 체크하고, down이 된 상태 => 즉, 마우스를 누른 상태임을 확인을 하고, 그 만큼 scroll 변화량을 넣습니다.

 

scrollLeft API가 존재하는데 왜 하필 scrollLeft일까 알아보니까, 횡 이동을 담당하는 API를 scrollLeft라고 하는거 같더라고요? scrollRight는 존재하지 않습니다.

 

그리고 이동이 다 끝나고 mouseup, 마우스 클릭을 중단하면 down 변수를 false로 바꿔 이동이 끝났음을 알려줍니다.

 

간단하쥬?

---

이상 JavaScript 횡 이동 스크롤 만들기였습니다. ^_^