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

Last update: Aug 6, 2022
Comments
  • 1. 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?

    Reviewed by movepixels at 2018-11-02 17:12
  • 2. 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"
      },
    
    Reviewed by masterWeber at 2020-11-07 12:56
  • 3. 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!

    Reviewed by hazzo at 2018-06-29 07:57
  • 4. 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

    Reviewed by NoMaillard at 2018-12-05 11:51
  • 5. 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.

    Reviewed by Pederytter at 2017-10-03 06:56
  • 6. 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/

    Reviewed by madeas at 2019-07-27 17:22
  • 7. 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?

    Reviewed by henkm at 2019-04-13 09:21
  • 8. 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

    Reviewed by HellDunkel at 2018-10-20 20:36
  • 9. 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!

    Reviewed by celeryclub at 2018-04-27 23:23
  • 10. 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?

    Reviewed by Pederytter at 2017-10-27 08:18
  • 11. 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.

    Reviewed by websanova at 2018-09-20 03:15
  • 12. 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

    Reviewed by dohahelmy at 2022-08-11 08:49
  • 13. 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?

    Reviewed by AtousaDarabi at 2022-03-10 10:47
  • 14. 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?

    Reviewed by manxaSP at 2022-02-28 17:49
  • 15. 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).

    Reviewed by IlyaSemenov at 2021-11-30 03:33
  • 16. UIEvent.which is Non-standard

    UIEvent.which is Non-standard. https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which

    https://github.com/donmbelembe/vue-dragscroll/blob/02699f2b1753461c25d6b82a0b983b95848f4a5a/src/directive.js#L88-L98

    I think it should be changed to use a MouseEvent.button https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

    Reviewed by xmtoken at 2021-10-12 14:17
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

Jul 31, 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

Jul 10, 2022
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

Jan 5, 2022
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

Mar 2, 2022
A tiny Vue directive that stop propagation scroll when edge reached
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 ❌

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

Jul 29, 2022
Scroll-lock directive for vue.js(2.0)

Scroll-lock directive for vue.js(2.0)

Apr 1, 2020
🦉 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

Jul 6, 2022
🖱️ 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

Jul 25, 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

May 24, 2022
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install

May 19, 2021
A Vue directive to wrap @jlmake's excellent ScrollReveal library.

vue-scroll-reveal A Vue directive to wrap @jlmakes' excellent ScrollReveal library. The directive exposes reset, nodesktop, and nomobile as modifiers

Jul 27, 2022
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto DEMO Scrolling to elements was never this easy! This is for vue 2.x and vue 3.x (since v2.19.0) For vue 1.x use [email protected] (note

Aug 16, 2022
Adds a directive that listens for click events and scrolls to elements.
Adds a directive that listens for click events and scrolls to elements.

vue-scroll-to Vue.js directive that listens for click events and scrolls to elements. Install With npm do: $ npm install vue-scroll-to --save or $ yar

Jul 15, 2022
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Feb 23, 2022
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

Jul 15, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

Jul 21, 2022
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

Jul 15, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Jul 10, 2022