search

donmbelembe / vue-dragscroll

A vue directive to make a scrollable element scroll by draging to the scroll direction
https://vue-dragscroll.clebinfosys.com/
MIT License
258 stars 32 forks source link

Native vertical Scroll and Horizontal Dragscroll #81

Open vin-ni opened 3 years ago

vin-ni commented 3 years ago

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!

iguilhermeluis commented 3 years ago

Same problem.

emavitta commented 3 years ago

I wrote this replay too many times... For me worked setting a custom breakpoint at 790px, under which the directive is disabled. Setting the directive on the container

v-dragscroll="{ active: drag }"

drag as a computed properties

drag(){ return (this.windowWidth>'790')?true:false; },

and this windowWidth ad a data updated on mounted

window.onresize = () => { this.windowWidth = window.innerWidth }

Also setting the container css: overflow-x: auto; -webkit-overflow-scrolling:

vin-ni commented 3 years ago

Thanks, i should try that.

PixsaOJ commented 2 years ago

-webkit-overflow-scrolling: is only supported by 1 version of 2 browsers or something, not great. Does not work on my Firefox mobile.

JR75 commented 2 years ago

Hello,

Don't know if anyone has still this problem. I did a simple solution - not perfect but he does the job : Add this event @dragscrollmove="keepScrollY($event)"

keepScrollY(e){ window.scrollTo(0,window.scrollY + e.detail.deltaY); },

I am just scrolling the window while your are on the dragscroll