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

Issues
  • 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 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • UIEvent.which is Non-standard

    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

    opened by xmtoken 0
  • Error when using it for the first time (Vue 2)

    Error when using it for the first time (Vue 2)

    I'm getting the following error in the console and nothing loads - Using Vue 2 with Laravel:

    image

    window.Vue.version is undefined

    image

    opened by iec989 1
  • Feature to scroll horizontally with mousewheel 'wheel' event.

    Feature to scroll horizontally with mousewheel 'wheel' event.

    Needs testing and more experimentation.

    adds modifiers

    • wheelx. scroll will effect the x axis.
    • wheelflip. Flips the scroll direction with wheel
    opened by Lee182 1
  • [feature request] Scroll to opposite direction?

    [feature request] Scroll to opposite direction?

    Hi, thanks for your work! Could we possibly have an option to scroll in the direction of cursor?

    opened by rasuru 1
  • Ctrl-click or right-click starts dragging

    Ctrl-click or right-click starts dragging

    When I ctrl-click or right-click in a draggable area, then click outside the options menu to leave it, the area acts as if I've started dragging it, even though the mouse is not being pressed.

    Is this a bug or expected behavior? Is there a way to ensure vue-dragscroll ignores ctrl-click or right-click events?

    This issue can be reproduced using this CodePen: https://codepen.io/itslit/pen/EEBYGa

    Here's a screen recording of the issue. Note that I clicked outside of the options menu, and was not dragging when the background is following my mouse.

    https://user-images.githubusercontent.com/1780943/112762251-a8060800-8fcc-11eb-80ce-a49f0cbde57e.mp4

    bug 
    opened by mattgilbertnet 1
  • Native vertical Scroll and Horizontal Dragscroll

    Native vertical Scroll and Horizontal Dragscroll

    Hello, is it possible to use dragscroll only for horizontal scrolling and to normally scroll vertically on touch displays.

    I have a table that is bigger than screen size, so at some point I can't scroll further vertically.

    When I open the examples here on mobile: https://donmbelembe.github.io/vue-dragscroll/ while dragging through any element, the vertical scroll is deactivated, even on X-Axis only draggscrolls.

    Thanks!

    opened by vin-ni 4
  • data-dragscroll-nested, data-no-dragscroll-nested feature implemented

    data-dragscroll-nested, data-no-dragscroll-nested feature implemented

    Related to this issue, https://github.com/donmbelembe/vue-dragscroll/issues/79

    opened by Kasheftin 0
  • Implement data-dragscroll-nested, data-no-dragscroll-nested

    Implement data-dragscroll-nested, data-no-dragscroll-nested

    We heavily use vue-dragscroll in our application. There're a lot of draggable elements that should not trigger vue-dragscroll behavior. That's why we use vue-dragscroll:nochilddrag. Then, some elements should trigger vue-dragscroll, and there data-dragscroll attribute is in use.

    The issue is the layout is quite complex, it consists on multiple nested containers, and vue-dragscroll:nochilddrag leads to the requirement to add data-dragscroll on every node. There's a drag-scroll table header with columns (data-dragscroll), every one has a title (data-dragscroll), the button (data-dragscroll) with the icon (data-dragscroll) etc.

    It would be quite convenient to have something like data-dragscroll-nested that should propagate the behavior down to all the child nodes as well as data-no-dragscroll-nested for the reverse behavior.

    opened by Kasheftin 0
  • Directive not SSR compliant

    Directive not SSR compliant

    Any chance on making this directive SSR compliant? That would mean handling all the cases where window is accessed.

    opened by hannesaasamets 1
  • No scroll-snap compatibility

    No scroll-snap compatibility

    It doesn't seem to work when using css scroll-snap-align

    .carousel {
    	position: relative;
    	display: flex;
    	height: 500px;
    	width: 100%;
    	scroll-snap-type: x mandatory;
    	overflow-x: auto;
    
    	/* Hide scrollbar */
    	-ms-overflow-style: none;
    	scrollbar-width: none;
    	&::-webkit-scrollbar {
    		display: none;
    	}
    }
    
    .carousel .slide {
    	flex: 0 0 100%;
    	height: 100%;
    	position: relative;
    	box-sizing: border-box;
    	scroll-snap-align: center;        <--- Here is the problem
    	scroll-snap-stop: always;
    }
    

    Is there any way to make it work?

    opened by markusand 4
Releases(v3.0.0)
Owner
a Laravel + Vue.js developper.
null
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 167 Oct 12, 2021
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 169 Oct 14, 2021
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 393 Sep 28, 2021
Vue3.0 无缝滚动组件

vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

null 15 Oct 7, 2021
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Oct 1, 2021
A vue directive to make a scrollable element scroll by draging to the scroll direction

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" st

null 200 Oct 5, 2021
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 2021
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 26 Oct 12, 2021
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

Igor Randjelovic 1.8k Oct 13, 2021
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 42 Aug 2, 2021
A plugin that checks if element is in viewport

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 108 Sep 23, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 57 Sep 30, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 90 Oct 12, 2021
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,

null 20 Sep 30, 2021
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

Kevin Houghton 16 Oct 19, 2020
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021