Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. 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 hotspots within the scrollable area, the mouse wheel or via autoscrolling. Unobtrusive and smooth is the key here.

Table of contents

1. How does it work?
2. Quick demo
3. Basic demo (use as template)
4. Download
5. More examples!
   • Lab page (tweak and test yourself)!
   • Scrolling text
   • Mini scroller
   • Running ticker
   • Multiple autoscrollers on one page (loading content through AJAX)
   • Clickable logo parade
   • Image gallery using ColorBox
6. Options
7. Altering options after initialization
8. Public methods
9. Callbacks
10. The CSS
11. Dependencies
12. Help, support and newsletter
13. Version history and license
14. About me
15. Nice sites that use Smooth Div Scroll
16. If you like this plugin

How does it work?

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 the mouse wheel or just let the scroller autoscroll. The scrollWrapper determines how much of the scrollableArea that should be visible - everything outside the scrollWrapper is hidden from view.

Quick demo

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 autoscrolling as soon as the page loads and stop autoscrolling as soon as the user interacts with the scoller.

The jQuery code for this particular demo looks like this:

<script type="text/javascript">
	$(document).ready(function() {
		$("#makeMeScrollable").smoothDivScroll({ 
			mousewheelScrolling: true,
			manualContinuousScrolling: true,
			visibleHotSpotBackgrounds: "always",
			autoScrollingMode: "onstart"
		});
	});
</script>

In this particular demo I've set some options that override the default options:

• mousewheelScrolling: true - The user can scroll using the mouse wheel.
• manualContinuousScrolling: true - The scroller becomes endless in both directions when the user scrolls manually (using the hotspots or the mousewheel).
• visibleHotSpotBackgrounds: "always" - The hotspots are visible all the time.
• autoScrollingMode: "onstart" - The scroller will start autoscrolling as soon as the page has loaded and stop autoscrolling as soon as the user interacts with the scoller.

I've used only a couple of the available options. You'll find all the options described here.) In the demo above the HTML-code looks like this:

	<div id="makeMeScrollable">
		<img src="images/demo/field.jpg" alt="Demo image" id="field" />
		<img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
		<img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
		<img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
		<img src="images/demo/river.jpg" alt="Demo image" id="river" />
		<img src="images/demo/train.jpg" alt="Demo image" id="train" />
		<img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
		<img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
	</div>

As you can see there is a surrounding div with the id makeMeScrollable. This is the element that I turn into a Smooth Div Scroll. Inside this div you can put any content - not just images.

Please note that you may have to give the elements that you put inside the scrollable area some styling to make sure that they are positioned like you want them. Here's a good template to start with:

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

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.

Back to table of contents

About me

My name is Thomas Kahn and I live and work in Stockholm, Sweden. I've been working as a web developer for the past fourteen years.

Currently I'm working at a small advertising agency called Kärnhuset in central Stockholm. When I'm not dabbling with jQuery I program in ASP.NET/C#, XML/XSLT and I also do a lot of XHTML/CSS. Umbraco is my favorite CMS and I try to be as active as I can in the Umbraco community.

If you find a bug or want to make alterations of the code, please go to the Smooth Div Scroll page on GitHub.

Happy scrolling!

Back to table of contents

If you like this plugin

If you found this plugin useful and it saved you a lot of time on your latest projekt, please consider using Flattr.

Back to table of contents