VueDragToScroll

A Vue 2 & 3 compatible composable for drag to scroll.
VueDragToScroll is a minimal styled, configurable Vue composable to easily implement drag scroll.

Documentation

Installation

yarn add vue-dragtoscroll

How to use

Composable

The preferable usage of vue-dragtoscroll is with a composable. The composable allows you to tweak a lot of settings and check if the user is dragging or not for your click events.

<script setup>
  import { useDragToScroll } from "vue-dragtoscroll"
  const yourScrollContainer = ref(null)
  const { isDragging } = useDragToScroll(yourScrollContainer)
</script>

<template>
  <div ref="scrollContainer" />
</template>

Directive

If you just require a super simple implementation that just works out of the box and don't mind about event propagation and such. You can use this v-directive.

<script setup>
  import { dragToScroll: vDragToScroll } from "vue-dragtoscroll"
</script>

<template>
  <div v-drag-to-scroll ref="scrollContainer" />
</template>

Contributing

I would love to have your contributions! All PRs all welcomed!

Authors

• Melvin Idema

Credits

All credits go to these open-source works and resources

• vue-demi