jQuery Smooth Div Scroll by Thomas Kahn

Back to index

Mini scroller



This scroller is so small that the best solution is to disable the hotspot scrolling and just go with mousewheel scrolling and/or touch. Just in case you're wondering: on a technical level you will have no problems getting the hotspot scrolling to work, it's just that the hotspots become so small so if you can it's best to just leave them out for usability resons.

In this example the CSS looks like this:

#miniScroller
{
	width: 150px;
	height: 50px;
	position: relative;
	border: solid 1px #ccc;
}

And the plugin initialization looks like this:


	<script type="text/javascript">
		$(document).ready(function () {
			$("#miniScroller").smoothDivScroll({
				hotSpotScrolling: false,
				visibleHotSpotBackgrounds: "",
				mousewheelScrollingStep: 45,
				mousewheelScrolling: "allDirections",
				touchScrolling: true
			});
		});
	</script>

If you would like to keep the hotspots it's a good idea to override the CSS of the hot spots to make them smaller. In the default CSS they are set to a minimum of 75px which is way too big for this 150 pixel wide scroller:

div.scrollingHotSpotLeft, div.scrollingHotSpotRight
{
	width: 35px;
	min-width: 35px;
}

One thing that I noticed when I created this example was that you percieve the scroller as going way too fast eventhough it may have the same speed as a big scroller. I think it's because the viewing scope is so small and you don't get enough time to see each image that scrolls by. To compensate for this I set the parameter mousewheelScrollingStep to 45. The default value for mousewheelScrollingStep in Smooth Div Scroll is 70.

A special thanks to turbomilk.com for letting me use the cute icons! :-)

Back to index