How to drag and scroll in a div with jQuery

Posted by Don Munter on Stack Overflow See other posts from Stack Overflow or by Don Munter
Published on 2010-06-14T22:57:42Z Indexed on 2010/06/14 23:02 UTC
Read the original article Hit count: 249

Filed under:

jQuery

|

scroll

|

draggable

Hey guys,

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

© Stack Overflow or respective owner

Related posts about jQuery

Microsoft and jQuery

as seen on West-Wind - Search for 'West-Wind'
The jQuery JavaScript library has been steadily getting more popular and with recent developments from Microsoft, jQuery is also getting ever more exposure on the ASP.NET platform including now directly from Microsoft. jQuery is a light weight, open source DOM manipulation library for JavaScript that… >>> More
An Introduction to jQuery Templates

as seen on Stephen Walter - Search for 'Stephen Walter'
The goal of this blog entry is to provide you with enough information to start working with jQuery Templates. jQuery Templates enable you to display and manipulate data in the browser. For example, you can use jQuery Templates to format and display a set of database records that you have retrieved… >>> More
Ajax Control Toolkit December 2013 Release

as seen on Stephen Walter - Search for 'Stephen Walter'
Today, we released a new version of the Ajax Control Toolkit that contains several important bug fixes and new features. The new release contains a new Tabs control that has been entirely rewritten in jQuery. You can download the December 2013 release of the Ajax Control Toolkit at http://Ajax.CodePlex… >>> More
jQuery show "loading" during slow operation

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to show a small loading image during a slow operation with jQuery and can't get it right. It's a BIG table with thousands of rows. When I check the "mostrarArticulosDeReferencia" checkbox it removes the "hidden" class from these rows. This operation takes a couple of seconds and I want… >>> More
Tracking download of non-html (like pdf) downloads with jQuery and Google Analytics

as seen on Developer IT - Search for 'Developer IT'
Hi folks, it’s been quite calm at Developer IT’s this summer since we were all involved in other projects, but we are slowly comming back. In this post, we will present a simple way of tracking files download with Google Analytics with the help of jQuery. We work for a client that offers… >>> More

Related posts about scroll

Need a new mouse: clicky scroll wheel and additional thumb-operated scroll wheel

as seen on Super User - Search for 'Super User'
I'm having some carpel tunnel syndrome or RSI issues, and I need to get a new mouse. I've tried a friend's Logitech MX Revolution and it's almost perfect. I LOVE the thumb-operated scroll wheel, and I think that that alone would solve many of my hand pain issues. The problem is that it uses their… >>> More
my mouse scroll wheel doesn't scroll

as seen on Super User - Search for 'Super User'
It's only a minor thing but i can't solve it. I have a ps2 mouse on win xp sp3. the wheel has stopped scrolling in all apps however in apps that support it i can click the wheel and bring up the scrolling four way arrows and scroll that way. I've tried uninstalling the drivers and changing the… >>> More
How to automatically scroll ScrollViewer - only if the user did not change scroll position

as seen on Stack Overflow - Search for 'Stack Overflow'
I would like to create the following behaviour in a ScrollViewer that wraps ContentControl: When the ContentControl height grows , the ScrollViewer should automatically scroll to the end. This is easy to achive by using ScrollViewer.ScrollToEnd(). However, if the user uses the scroll bar, the automatic… >>> More
Programmically scroll a textbox's scroll bar from a Vscrollbar or custom one

as seen on Stack Overflow - Search for 'Stack Overflow'
I made a custom scrollbar that sits beside a normal textbox. I would like to scroll the text box like you would any other one with my control. How can this be done? Thanks. >>> More
Mouse scroll not working in a scroll viewer with a wpf datagrid and additional UI elements

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying to figure out how to get the mouse scroll working on a wpf window with a scrollviewer and a datagrid within it. The WPF and C# code is below <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> <Grid> <Grid.RowDefinitions> … >>> More