A vue directive to make a scrollable element scroll by draging to the scroll direction

Overview

vue-dragscroll

vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style).

Documentation

Follow me on twitter: https://twitter.com/don_jon243

Comments
  • No Scroll

    No Scroll

    Just delete the question?

    I have this:

    <div v-dragscroll style="width:100%; height:90px; overflow:hidden" class="grab-bing">
       <p>Listen to your favorite artists and albums whenever and wherever, online and offline.
        Listen to your favorite artists and albums whenever and wherever, online and offline.
       </p>
    .... paragraph above i pasted like 100 times but for sake of the question no need to include that
    </div>
    

    But nothing.

    Please advise on what I am doing wrong?

    opened by movepixels 34
  • Vue 3 support

    Vue 3 support

    Does not give an error, the console is empty.

    "dependencies": {
        "core-js": "^3.7.0",
        "vue": "^3.0.2",
        "vue-router": "^4.0.0-rc.2",
        "vuex": "^4.0.0-rc.1"
      },
    
    opened by masterWeber 13
  • Click events inside directive not working on mobile

    Click events inside directive not working on mobile

    Hi @donmbelembe,

    Nice directive, it's wasn't working on mobile but I saw that you fixed in the las release. But now touch events of child elements won't work. It works on desktop but not in mobile.

    Summary: If you bind a click event to the child elements will only trigger on desktop not mobile.

    Cheers!

    help wanted 
    opened by hazzo 13
  • Pass scroll not working

    Pass scroll not working

    scroll pass does not seem to work when you can only drag horizontally, dragging vertically does not scroll the page.

    here's a GIF demonstrating that : 2018-12-05 12 50 41

    enhancement 
    opened by NoMaillard 11
  • Input issue

    Input issue

    Hey there

    Thanks for taking your time to make this plugin, I was quite happy to see there were a vue version of this.

    I do have some trouble using input fields, if the input element is inside the html tag with the v-dragscroll tag. I made a short codepen so you can see the problem live:

    https://codepen.io/anon/pen/KXXmLw

    Not sure what to look after to debug this.

    enhancement 
    opened by Pederytter 9
  • How to disable scrolling of the main content?

    How to disable scrolling of the main content?

    How can I disabled scrolling main content through the "Y" axis while I am scrolling through the "X" axis?

    sample https://jsfiddle.net/madeas/gtu5rn8e/

    opened by madeas 6
  • Not compatible with vuedraggable

    Not compatible with vuedraggable

    In my interface I already have draggable components with the vuedraggable library. Whenever I add the dragscroll directive to a parent element, the draggable components stop working.

    Is this intended behaviour? Is there a way around it?

    opened by henkm 6
  • TypeError

    TypeError

    I sometimes get this in Firefox:

    TypeError: r.touches is undefined[Weitere Informationen] build.js line 1033 > eval:1:2437 o/e.mm vue-dragscroll.min.js:1:2132

    opened by HellDunkel 6
  • Export directive from package instead of VueDragscroll object

    Export directive from package instead of VueDragscroll object

    Hi there. It's me again. This PR adds support for exporting the directive from the NPM package, giving people who use Webpack (like me) more flexibility in how they register the dragscroll directive. Currently it's not possible to register it within the scope of a component only, but this PR adds support for that. Updated the docs too this time. Let me know what you think.

    Thanks very much for your time!

    opened by celeryclub 6
  • More options for when you can drag

    More options for when you can drag

    Hey again!

    So I finally came around to this problem again. I'm not sure if you have a work around for it, but my issue is that I wan't multiple html elements to be dragable to the parent element, which have v-dragable:nochilddrag.

    I know v-dragable makes all child elements dragable, but this isn't what I'm looking for either. I might have 10 child elements from the element which has v-dragable, where only 5 of them needs to be dragable from the parent element.

    A simple (not so great, but hope you get the idea from it) can be seen here.

    https://codepen.io/anon/pen/RjbJdJ

    What I'm trying is to make the whole green area dragable, without making the blue areas with input dragable. I know I can place my boxes out of the columns, but that can't be done in what I'm trying to accomplish in the project I'm working on.

    Any idea how this can be done or if it's even possible with the current version?

    opened by Pederytter 6
  • Events for manually controlling position.

    Events for manually controlling position.

    Would be nice to manually change the x / y position, from something like a button. So for instance a left/right button, that then pan/slides it an x amount of pixels.

    opened by websanova 5
  • overflow visible doesn't work with the directive

    overflow visible doesn't work with the directive

    Is there a way to make the directive work with overflow: visible? I need content to be visible but start point is contained in project container, couldn't implement a clear solution for that

    opened by dohahelmy 1
  • Can't use it properly on table

    Can't use it properly on table

    I wanted to use it on a table when overflows. As it is just just on block displays works, so I added css to table tag: display: block, Width: 100%

    But when the columns in table are few my columns all come left and don't fill all width(As it is displayed block not table). How can I use it with display table?

    opened by AtousaDarabi 1
  • Dont draggscroll with v-data-table?

    Dont draggscroll with v-data-table?

    I´m using v.3.0.1

    main.js ` import VueDragscroll from 'vue-dragscroll' Vue.use(VueDragscroll)

    `

    card.vue <template> <v-container class="ma-5" fluid > <v-row > <v-card v-if="getOPCard" class="mt-5" v-dragscroll > <v-data-table :headers="headers" :items="filteredItems" :search="search" :loading="loading" class="elevation-1" hide-default-footer disable-pagination multi-sort dense fixed-header > </v-data-table> </v-card> </v-row> </v-container> </template>

    why dragscroll donst work?

    opened by manxaSP 1
  • Native mobile vertical page scrolling is broken with .x

    Native mobile vertical page scrolling is broken with .x

    The use case is, I have a horizontal scrolling div which turns to vertical non-scrollable with mobile viewport media rules.

    • v-dragscroll and v-dragscroll.x completely break (prevent) native vertical page scrolling on mobile. It's not possible to scroll the page by dragging elements inside the dragscroll container.
    • v-dragscroll.pass and v-dragscroll.pass.x allow vertical scrolling on mobile but lead to jerky experience on desktop when drag-scrolling the container with mouse (unintentional small vertical mouse drag is 'passed' to the body scroll container and makes the page jiggle)

    I would expect v-dragscroll.x to completely ignore/pass 'as is' all vertical events. Currently, they are either lost (without .pass) or converted from drag to scroll (with .pass).

    opened by IlyaSemenov 1
Releases(v4.0.4)
Owner
a Laravel + Vue.js developper.
null
A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold or past the threshold

A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold, or past the threshold

javad mnjd 0 Jun 30, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Nov 24, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Nov 24, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
Vue Component for make a fake scroll

vue-fake-scroll Vue Component for creating fake scroll. Sometimes you only need to create scroll area without actually scrolling the content (fixed) a

Ali Jaya Meilio 4 Feb 5, 2021
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 41 Feb 4, 2022
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 655 Sep 22, 2022
Scroll-lock directive for vue.js(2.0)

Scroll-lock directive for vue.js(2.0)

amipei 1 Apr 1, 2020
A vue 2.0 directive to keep scroll position for keep-alived components.

vue-keep-scroll-position A vue 2.0 directive to keep scroll position for keep-alived components. Forked from vue-keep-scroll and rewritten for vue 2.0

Beep LIN 38 Feb 18, 2022
A Vue.js directive to add a class to an based on vertical scroll

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

Jase Pellerin 6 Jan 8, 2020
A vue directive to scroll anywhere on a container (horizontally or vertically)

vue-autoscroll A vue directive to scroll anywhere on a container (horizontally or vertically)

null 7 May 22, 2021
🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level.

A simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome simple-scrollbar

Jonathan Bakebwa 13 Nov 10, 2022
A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

Huabin Wang 6 Aug 17, 2020
🖱️ Vue directive to keep things scrolled to the bottom.

Installing Using a package manager (recommended) The recommended way of installing vue-chat-scroll is using the npm package with the npm (or yarn) pac

Theodore Messinezis 553 Nov 30, 2022
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 30 Sep 18, 2022