jQuery Smooth Touch Scroll by Thomas Kahn

Smooth Touch Scroll is a jQuery plugin that scrolls content horizontally left or right when you swipe it with your finger. As the name of the plugin hints the scrolling is completely smooth - no distict steps. The interface is super clean - no buttons, links or anything else that just gets in the way.

If this plugin feels familiar, you may have used Smooth Div Scroll to present smooth scrolling content on your webpage. 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.

Quick demo

Here's a quick demo of Smooth Touch Scroll in action. Of course you get the best experience if you use it on a touch device, but if you don't have one you can still use it by dragging the content with the mouse.

Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image

The jQuery code for this particular demo looks like this:


<script type="text/javascript">
	$(document).ready(function() {
		$("#TouchScroller").smoothTouchScroll({ 
			continuousScrolling: true
		});
	});
</script>

In this particular demo I've set one option that overrides the default option: continuousScrolling: true. This means that there will be no stop at the right or left edge of the scroller - continuous scrolling.

In the demo above the HTML-code looks like this:


<div id="TouchScroller">
	<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 TouchScroller. This is the element that I turn into a touch scroller. 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:


#TouchScroller 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.

Documentation and download

You will find the full source code and all the documentation you'll need at the GitHub page:

https://github.com/tkahn/SmoothTouchScroll

About me

Thomas Kahn dressed for the long Swedish winter

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 the advertising agency Kärnhuset in central Stockholm, Sweden. When I'm not dabbling with jQuery I program in ASP.NET/C# and I also do a lot of HTML/CSS.

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

Happy scrolling!