ScrOoly! v2.1

ScrOoly is a jQuery plugin which allows to create scrollbar very easily.
ScrOoly is touch compatible and responsive !

Le HTML

<div id="scrooly" class="span7">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
	</p>
	<img src="assets/img/photo01.jpg" />
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
	</p>
</div>

Le CSS

.scr_track {
	background: #EEE;
	border-radius: 5px;
	margin: 2px;
}
.scr_trackH {
	height: 5px;
}
.scr_trackV {
	width: 5px;
}

.scr_drag {
	background: #888;
	border-radius: 5px;
}
.scr_trackH .scr_drag {
	height: 5px;
}
.scr_trackV .scr_drag {
	width: 5px;
}

.scr_hover {
	background: #444;
}
.scr_moving {
	background: #03B2F3;
}

#scrooly {
	height: 300px;
}

Le JavaScript

jQuery('#scrooly').scrooly({
// step of the scrollbar
	step: 15,
// tracks opacity
	opacity: 0.5,
// tracks toggle speed
	speed: 200
});

Technical part

ScrOoly has 1 public methods :

• resize: recalc tracks & drag size ( use it after changing the content )

How to use the scrooly object ?

As simple as $('#mySelector').scrooly({ params ... }).
After that, you can use the public function like that $('#mySelector').scrooly('resize');

Old version (1.0)

Download

Contact

Google : http://plus.google.com/gouz/
Twitter : http://www.twitter.com/gouz
Mail : [email protected]

Fork me on github : http://github.com/gouz/scrooly

Donation