[JavaScript 30일 챌린지] : 27일차

<script>
  constslider=document.querySelector('.items');
  letisDown= false;
  letstartX;
  letscrollLeft;

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;  // stop the fn from running
    e.preventDefault();
    const x = e.pageX -slider.offsetLeft;
    const walk = (x -startX) * 3;
slider.scrollLeft =scrollLeft- walk;
  });

</script>

세로 스크롤이 아닌, 가로 스크롤을 통해 내용을 확인할 수 있는 프로젝트였다.

그냥 스크롤 뿐만 아니라 클릭후 드래그하는 방식으로도 페이지를 이동시킬 수 있었다.