feat: option hide scrollbar🔧(#16)

README.md

@@ -140,3 +140,13 @@ const options = {
     </div>
 </template>
 ```
+- ### Hide scrollbar
+#### Example
+```javascript
+<template>
+    <div v-drag-scroller={
+      hideScrollbar: true
+    }>
+    </div>
+</template>
+```

dist/declarations/index.d.ts

@@ -5,6 +5,7 @@ interface ICustomBinding extends DirectiveBinding {
         endScroll?: (e: MouseEvent) => void;
         onScrolling?: (e: MouseEvent) => void;
         speed?: number;
+        hideScrollbar?: boolean;
     };
     modifiers: {
         disablechild?: boolean;

dist/vue-drag-scroller.es.js

@@ -1,43 +1,42 @@
-const S = "drag-scroller-disable", L = /* @__PURE__ */ (() => {
-  const l = /* @__PURE__ */ new WeakMap();
+const v = "drag-scroller-disable", L = /* @__PURE__ */ (() => {
+  const s = /* @__PURE__ */ new WeakMap();
   return {
-    mounted(r, e) {
-      let a = !1;
-      const { onlyX: s, onlyY: d, disablechild: v } = e.modifiers, i = (t) => {
-        if (v)
-          return t === r;
-        for (; t && t.parentNode; ) {
-          if (t && (t != null && t.hasAttribute(S)))
+    mounted(t, a) {
+      let o = !1;
+      const { onlyX: c, onlyY: d, disablechild: S } = a.modifiers, e = a.value ?? {};
+      e.hideScrollbar === !0 && (t.style.overflow = "hidden");
+      const p = (r) => {
+        if (S)
+          return r === t;
+        for (; r && r.parentNode; ) {
+          if (r && (r != null && r.hasAttribute(v)))
             return !1;
-          if (t === r)
+          if (r === t)
             return !0;
-          t = t.parentNode;
+          r = r.parentNode;
         }
         return !1;
-      }, n = (t) => {
-        var o;
-        a = i(t.target), a && ((o = e.value) != null && o.startScroll) && typeof e.value.startScroll == "function" && e.value.startScroll(t);
-      }, c = (t) => {
-        var o;
-        a && e.value && ((o = e.value) != null && o.endScroll) && typeof e.value.endScroll == "function" && e.value.endScroll(t), a = !1;
-      }, u = (t) => {
-        var f, p;
-        if (!a)
+      }, n = (r) => {
+        o = p(r.target), o && (e != null && e.startScroll) && typeof (e == null ? void 0 : e.startScroll) == "function" && e.startScroll(r);
+      }, f = (r) => {
+        o && (e != null && e.endScroll) && typeof (e == null ? void 0 : e.endScroll) == "function" && e.endScroll(r), o = !1;
+      }, u = (r) => {
+        if (!o)
           return !1;
-        e.value && ((f = e.value) != null && f.onScrolling) && typeof e.value.onScrolling == "function" && e.value.onScrolling(t), t.stopPropagation && t.stopPropagation(), t.preventDefault && t.preventDefault(), t.cancelBubble = !0, t.returnValue = !1;
-        const o = ((p = e.value) == null ? void 0 : p.speed) || 1;
-        s ? r.scrollLeft -= t.movementX * o : (d || (r.scrollLeft -= t.movementX * o), r.scrollTop -= t.movementY * o);
+        e != null && e.onScrolling && typeof (e == null ? void 0 : e.onScrolling) == "function" && e.onScrolling(r), r.stopPropagation && r.stopPropagation(), r.preventDefault && r.preventDefault(), r.cancelBubble = !0, r.returnValue = !1;
+        const l = (e == null ? void 0 : e.speed) || 1;
+        c ? t.scrollLeft -= r.movementX * l : (d || (t.scrollLeft -= r.movementX * l), t.scrollTop -= r.movementY * l);
       };
-      l.set(r, { dragStart: n, dragEnd: c, drag: u }), r.addEventListener("pointerdown", n), addEventListener("pointerup", c), addEventListener("pointermove", u);
+      s.set(t, { dragStart: n, dragEnd: f, drag: u }), t.addEventListener("pointerdown", n), addEventListener("pointerup", f), addEventListener("pointermove", u);
     },
-    unmounted(r) {
-      const { dragStart: e, dragEnd: a, drag: s } = l.get(r);
-      r.removeEventListener("pointerdown", e), removeEventListener("pointerup", a), removeEventListener("pointermove", s);
+    unmounted(t) {
+      const { dragStart: a, dragEnd: o, drag: c } = s.get(t);
+      t.removeEventListener("pointerdown", a), removeEventListener("pointerup", o), removeEventListener("pointermove", c);
     }
   };
 })(), E = {
-  install(l) {
-    l.directive("drag-scroller", L);
+  install(s) {
+    s.directive("drag-scroller", L);
   }
 };
 export {

example/App.vue

@@ -70,7 +70,7 @@ const options = {
        <!-- only scroll vertical -->
        <div class="container--normal">
         <p>Only scroll vertical: <code>v-drag-scroller.onlyX</code></p>
-        <div v-drag-scroller.onlyY="options" class="wrapper only">
+        <div v-drag-scroller.onlyY="{...options, hideScrollbar: true}" class="wrapper only">
           <div class="content">
             <div  class="box"></div>
             <div  class="box"></div>

example/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 import { createApp } from 'vue'
-import VueDragScroller from "vue-drag-scroller"
+import VueDragScroller from "../src/index"
 import App from './App.vue'
 
 const app = createApp(App)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-scroller",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "type": "module",
   "license": "MIT",
   "description": "A vue directive that helps you scroll in a more natural way.",
@@ -51,7 +51,7 @@
     "type": "git",
     "url": "git+https://github.com/huynamboz/vue-drag-scroller.git"
   },
-  "homepage": "https://huynamboz.github.io/vue-drag-scroller/",
+  "homepage": "https://hinam.site/docs/vue-drag-scroller",
   "keywords": [
     "vue3",
     "vue3-directive",

src/index.ts

@@ -1,13 +1,14 @@
 import { App, DirectiveBinding } from 'vue'
 const CHILD_DISABLE = 'drag-scroller-disable'
 const CHILD_ENABLE = 'drag-scroller-enable'
-
+const HIDE_SCROLLBAR = 'hideScrollbar'
 interface ICustomBinding extends DirectiveBinding {
   value: {
     startScroll?: (e: MouseEvent) => void
     endScroll?: (e: MouseEvent) => void
     onScrolling?: (e: MouseEvent) => void
     speed?: number
+    hideScrollbar?: boolean
   }
   modifiers: {
     disablechild?: boolean
@@ -19,10 +20,16 @@ interface ICustomBinding extends DirectiveBinding {
 const statefullDirective = (() => {
   const state = new WeakMap()
   return {
-    mounted(elem: HTMLElement, binding: ICustomBinding ) {
+    mounted(elem: HTMLElement, binding: ICustomBinding) {
       let isDrag = false
       const { onlyX, onlyY, disablechild } = binding.modifiers
 
+      const OptionBinding = binding.value ?? {}
+
+      if (OptionBinding.hideScrollbar === true) {
+        elem.style.overflow = 'hidden'
+      }
+
       const checkTag = (el: HTMLElement): boolean => {
         if (disablechild) {
           return el === elem
@@ -44,32 +51,32 @@ const statefullDirective = (() => {
         isDrag = checkTag(e.target as HTMLElement)
         if (
           isDrag &&
-          binding.value?.startScroll &&
-          typeof binding.value.startScroll === 'function'
+          OptionBinding?.startScroll &&
+          typeof OptionBinding?.startScroll === 'function'
         ) {
-          binding.value.startScroll(e)
+          OptionBinding.startScroll(e)
         }
       }
 
       const dragEnd = (e: MouseEvent): void => {
-        if (isDrag && binding.value &&  binding.value?.endScroll && typeof binding.value.endScroll === 'function') {
-          binding.value.endScroll(e)
+        if (isDrag && OptionBinding?.endScroll && typeof OptionBinding?.endScroll === 'function') {
+          OptionBinding.endScroll(e)
         }
         isDrag = false
       }
 
       const drag = (ev: MouseEvent): any => {
         if (!isDrag) return false
 
-        if (binding.value && binding.value?.onScrolling && typeof binding.value.onScrolling === 'function') {
-          binding.value.onScrolling(ev)
+        if (OptionBinding?.onScrolling && typeof OptionBinding?.onScrolling === 'function') {
+          OptionBinding.onScrolling(ev)
         }
         // prevent text selection when mouse move
         if (ev.stopPropagation) ev.stopPropagation()
         if (ev.preventDefault) ev.preventDefault()
         ev.cancelBubble = true
         ev.returnValue = false
-        const speed = binding.value?.speed || 1
+        const speed = OptionBinding?.speed || 1
         if (onlyX) {
           elem.scrollLeft -= ev.movementX * speed
         } else if (onlyY) {

src/types.d.ts

@@ -1,7 +1,7 @@
 declare module 'vue-drag-scroller' {
   import VueDragScroller from './index.ts'
   import { dragScroller } from './index.ts'
-  
+
   export { dragScroller }
   export default VueDragScroller
-}
+}