Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to drag and scroll in a div with jQuery

I've been looking around for some time now, but I can't find a way to combine these elements:

I want a 100% width div, with 1 row of elements. I need to scroll through this div, just like: http://jqueryfordesigners.com/demo/scrollable-timelines.html

So with a hidden overflow and such.

But now I want some sort of smooth ease when I let go of the mouseclick, so it'll be like a sort sweep. So when I drag the screen from left to right, and let go of the mouse, it'll move on for 1 sec and linearly slowing down. Hm, am I making sense?

Does anyone know of any scripts or some tips to put me back on track?

Don

like image 371
Don Munter Avatar asked Jun 14 '10 22:06

Don Munter


1 Answers

Utterscroll is a drag and scroll library I've written: (EDIT: demo temporarily broken, seems a CDN link no longer works,)

GitHub: https://github.com/debiki/utterscroll
GitHub hosted demo: http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html

It differs from other libraries in that it 1) understands if you intend to select text, rather than scrolling (note that in the example linked to by the question, it's not possible to select text), and 2) it needs no, or almost no, configuration.

Utterscroll stops when you release the mouse though (just like Dragscrollable, in the answer above, does.)

like image 121
KajMagnus Avatar answered Sep 28 '22 22:09

KajMagnus