Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right.

Smooth Touch Scroll has just been released!

I have just released Smooth Touch Scroll, a slim touch version of Smooth Div Scroll. If Smooth Div Scroll is the Swiss Army Knife of smooth scrolling, Smooth Touch Scroll is the lightweight cousin, slimmed down and geared towards touch scrolling. Smooth Touch Scroll will still work on desktop computers that don't have touch (using drag scrolling) but it's primarily for touch devices.

Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no other buttons or links on outside the scroller since the scrolling is done using your fingers (touch), hotspots, the mouse wheel or via auto scrolling. Unobtrusive and smooth is the key here.

The basic principle behind Smooth Div Scroll is simple: let one div (scrollableArea) scroll inside another div (scrollWrapper). Two hotspots are used to trigger the actual scrolling (scrollingHotSpotLeft and scrollingHotSpotRight). You can also let the user scroll using touch, the mouse wheel or just let the scroller auto scroll. The scrollWrapper determines how much of the scrollableArea that should be visible - everything outside the scrollWrapper is hidden from view.

Here's a quick demo of Smooth Div Scroll in action. I've set the options so the user can scroll using the hotspots or the mouse wheel . I've also told the scroller to start auto scrolling as soon as the page loads and stop auto scrolling as soon as the user interacts with the scoller. Touch scrolling is not enabled for this particular demo - check out the touch demo if you want to try touch scrolling.

In this example there's no space between the elements inside the scrollable area. If you want a space between them, use padding and not margin since margin tends to generate errors in Internet Explorer.

I've put hundreds of hours of work into this project. If you found this plugin useful and it saved you a lot of time on your latest project, please consider using Flattr or PayPal to show your appreciation.

Flattr

PayPal

You pay what you think it's worth to you - there's no preconfigured amount.