js challenge day 27

Click and Drag

Code

  <script>
    const slider = document.querySelector('.items');
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
      isDown = true;
      slider.classList.add('active');
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    })

    slider.addEventListener('mouseleave', () => {
      isDown = false;
      slider.classList.remove('active');
    })
    slider.addEventListener('mouseup', () => {
      isDown = false;
      slider.classList.remove('active');
    })
    slider.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 3;
      slider.scrollLeft = scrollLeft - walk;
    })
  </script>

배운 점 & 느낀 점

이 과제는 가로로 스클롤링 하는 이벤트를 다루는 것이었습니다.

mousedown, mouseleave, mouseup, mousemove의 차이점에 대해서 알아야 했는데,

mousedown => 요소를 클릭했을 때

mouseleave => 마우스가 요소를 떠날 때

mouseup => 요소를 클릭한 후 땔 때

mousemove => 요소위에서 마우스를 움직 일 때

이를 활용해서 마우스를 클릭했을때, isDown으로 상태를 관리한 다음에,

isDown이 true일때 mousemove를 하면 가로로 스크롤링할 수 있게 하였습니다.