PC에서 가로 스크롤 터치로 움직일 수 있도록 구현 테스트

1. HTML

<div class="tabs">
    <button>전체</button>
    <button>#신작</button>
    <button>#완결</button>
    <button>#BL/GL</button>
    <button>#드라마</button>
    <button>#판타지</button>
    <button>#오피스</button>
    <button>#캠퍼스</button>
    <button>#호러/미스터리</button>
    <button>#학원</button>
    <button>#시대</button>
    <button>#기타</button>
    <button>#기타</button>
    <button>#기타</button>
</div>

 

 
2. CSS

.tabs {
  display: flex;
  margin-top: 32px;
  overflow: hidden;
  flex-wrap: nowrap;
  /* 모바일일 경우 overflow-x: auto 추가 */
  overflow-x: auto
}

 
3. JAVASCRIPT

left dragFlag = false
left x, y, preX, prey
const target = document.querySelector('.tabs')

target.addEventListener('mousedown', function (e) {
  dragFlag = true
  x = target.scrollLeft
  y = target.scrollTop
  preX = e.screenX
  prey = e.screenY
})

target.addEventListener('mousemove', function (e) {
  if (dragFlag) {
    target.scrollLeft = x - e.screenX + preX
    target.scrollTop = y - e.screenY + prey
    return false
  }
})

target.addEventListener('mouseup', function (e) {
	dragFlag = false
})