[Vue.js] 웹에서 가로 스크롤 click and drag 이벤트 구현하기

 

 

이번에 가로로 된 리스트를 구현하면서 모바일웹처럼 드래그 할 수 없는 점이 불편하게 느껴졌다.

사용자입장에서도 불편해 할 요소라 느껴져 적용하게 되었다.

 

 

 

---

 

 

 

📄 HTML

<!-- 가로 스크롤 -->
<div class="test-content">
  <p class="test-title">Vertical Scroll</p>
  <div class="vertical-scroll">
    <!-- 제어할 요소에 ref를 적용해준다. -->
    <ul ref="verticalScrollWrap">
      <template v-for="i in 12">
        <li :style="{ backgroundColor: `hsl(${parseInt(Math.random() * 24, 10) * 15}, 16%, 57%)` }"></li>
      </template>
    </ul>
  </div>
</div>

 

 

📄 script

data() {
    return {
      // 드래그 제어 요소
      isMouseDown: false,
      startX: 0,
      scrollLeft: 0,
    };
},

// 제어할 스크롤 요소
const verticalScrollWrap = this.$refs.verticalScrollWrap

verticalScrollWrap.addEventListener('mousedown', (e) => {
    this.isMouseDown = true
    this.startX = e.pageX - verticalScrollWrap.offsetLeft
    this.scrollLeft = verticalScrollWrap.scrollLeft
})

verticalScrollWrap.addEventListener('mouseleave', () => {
    this.isMouseDown = false
})

verticalScrollWrap.addEventListener('mouseup', () => {
    this.isMouseDown = false
})

verticalScrollWrap.addEventListener('mousemove', (e) => {
    if (!this.isMouseDown) return

    e.preventDefault()
    const x = e.pageX - verticalScrollWrap.offsetLeft
    const beforeScrollLeft = (x - this.startX) * 1
    verticalScrollWrap.scrollLeft = this.scrollLeft - beforeScrollLeft
})

 

 

---

 

 

prevent click when leave drag to scroll in js

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.