PC 수평 스크롤 터치 (클릭 드래그)

<div class="select_size_area">
  <div class="size">전체</div>
  <div class="size">230</div>
  <div class="size">235</div>
  <div class="size">240</div>
  <div class="size">245</div>
  <div class="size">250</div>
  <div class="size">255</div>
  <div class="size">260</div>
  <div class="size">265</div>
  <div class="size">270</div>
  <div class="size">275</div>
  <div class="size">280</div>
</div>
<script>
  const slider = document.querySelector('.select_size_area');
  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;
    slider.scrollLeft = scrollLeft - walk;
  });
</script>

Jqaury로 수정한 버전

bindSlideTabs() { const slider = $('.select_size_area'); let x, left, down; slider.mousedown(function (e) { e.preventDefault(); down = true; x = e.pageX; left = $(this).scrollLeft(); }); slider.mousemove(function (e) { if (down) { var newX = e.pageX; $(this).scrollLeft(left - newX + x); } }); slider.mouseleave(function (e) { down = false; }); slider.mouseup(function (e) { down = false; }); }
JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기