q-scroll-area drag to scroll anywhere

[labs20]

Hi.

Is there some example around on how to make a scroll-area respond to "mousedrag" its contents by dragging anywhere inside of its area, and not just by dragging the scrollbars?

This could be a nice feat too, even more if I could lock scroll directions and define a css handler class to limit the scroll activation only on specific parts of my layout.

Thanks!

[pdanpdan]

You can check a description here: https://htmldom.dev/drag-to-scroll/
You can directly use VTouchPan - but the idea is bad all over:

• it's redundant on mobile (and it's best to only enable it on desktop)
• it breaks normal expectations for content (difficult text selection, you name it)

[pdanpdan]

if you start a codepen with scroll area and some cards (with a description of what should be active to scroll the area) we can help

[labs20]

I'll make one with an example of what I need.

Thanks

[labs20]

Made this sketch: https://codepen.io/labs20/pen/abGYpob

Hope it helps to figure what I want.

Thanks in advance for your attention.

[pdanpdan]

https://codepen.io/pdanpdan/pen/VwxXpjd?editors=0010

All CSS changes are just cosmetic, so that I can see what I'm doing :)

[labs20]

v-touch-pan!!! Really nice!!

Thank you for your help.

Would be nice to have such behaviour out of the box, though.

Appreciated.

[metalsadman]

https://codepen.io/metalsadman/pen/zYNEXwG

[labs20]

Thank you!