Horizontal Click and Drag Scrolling with Vue Composable

useDragToScroll.md

export const useDragToScroll = (ref: Ref<HTMLElement | null>) => {
  const position = {
    left: 0,
    x: 0
  }

  const mouseDown = (event: MouseEvent) => {
    if (ref.value === null) return
    position.x = event.clientX
    position.left = ref.value.scrollLeft
    ref.value.style.cursor = 'grabbing'

    document.addEventListener('mousemove', mouseMove)
    document.addEventListener('mouseup', mouseUp)
  }

  const mouseMove = (event: MouseEvent) => {
    if (ref.value === null) return
    const moveX = event.clientX - position.x
    ref.value.scrollLeft = position.left - moveX
  }

  function mouseUp() {
    document.removeEventListener('mousemove', mouseMove)
    document.removeEventListener('mouseup', mouseUp)
    if (ref.value) ref.value.style.cursor = 'grab'
  }

  onMounted(() => {
    if (ref.value === null) return
    ref.value.addEventListener('mousedown', mouseDown)
  })

  onUnmounted(() => {
    if (ref.value === null) return
    ref.value.removeEventListener('mousedown', mouseDown)
  })
}