Documentation for scrollr v1.0.0 +changelog

If you have any problems, looking for some specific solutions or have a suggestion, please visit the wiki or open a ticket

Quickstart

scrollr is written in plain javascript without any dependencies.

Include files

Upload the scrollr.min.css and scrollr.min.js folder to your server and add the required files inside the head section of your HTML document.

<!-- scrollr stylesheet -->
<link rel="stylesheet" href="your_assets_path/scrollr.min.css">

<!-- scrollr javascript -->
<script src="your_assets_path/scrollr.min.js"></script>

IE Compatibility mode

To make scollr work with Internet Explorer 8+, be sure you're using the latest rendering mode for IE by adding the following meta tag inside the head section of your HTML document.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Add scrollr markup

By default all required markup will be generated by scrollr automagically. The type of the tag doesn't matter, it can be an article, a section or just a div, whatever.

<div class="content">
  <p>... Content ...</p>
</div>

In case you don't want scrollr to add the required markup for you, there's an option to disable it (see options for more information). Note that if you disable the option, you have to add the markup yourself.

<div class="content">
	<div class="scroll__wrapper">
		<div class="scroll__content">
			<p>... Content ...</p>
		</div>
	</div>
	<div class="scroll__bar">
		<div class="scroll__track">
			<div class="scroll__handle"></div>
		</div>
	</div>
</div>

Usage

You can initialize scrollr in many different ways.

// element
var myScrollr = scrollr(document.querySelector('.content'), options);

// selector string
var myScrollr = scrollr('.content', options);

// using the new operator
var myScrollr = new scrollr('.content', options);

// as a jQuery plugin (jQuery required)
var myScrollr = $('.content').scrollr(options);

// as dependency with requirejs
requirejs([
	'path_to_scrollr/scrollr.min.js',
], function (scrollr) {
	var myScrollr = scrollr('.content', options);
});

Options

Variable	Default Value	Description
generateMarkup	true	autogenerate markup
preloadContent	false	preload any content inside
initUpdateDelay	250	initial update delay during initialization in x milliseconds
debouncedUpdateDelay	100	debounced update delay during resize in x milliseconds
hideScrollBar	true	hide scrollr when inactive
hideDelayOnInit	1500	hide after x milliseconds on init
hideDelayOnMouseLeave	500	hide on mouse leave after x milliseconds
hideDelayOnScrollStop	1000	hide on scroll stop after x milliseconds
elementClass	scroll	classname of the scroll element
elementPreloadingClass	scroll--preloading	classname of the scroll--preloading element
elementDisabledClass	scroll--disabled	classname of the scroll--disabled element
wrapperClass	scroll__wrapper	classname of the scroll__wrapper element
wrapperDraggingClass	scroll__wrapper--dragging	classname of the scroll__wrapper--dragging element
contentClass	scroll__content	classname of the scroll__content element
barClass	scroll__bar	classname of the scroll__bar element
barVisibleClass	scroll__bar--visible	classname of the scroll__bar--visible element
trackClass	scroll__track	classname of the scroll__track element
handleClass	scroll__handl	classname of the scroll__handl element

Examples

Initialize scrollr using jQuery, custom classnames and with manual generated markup.

Note that if you change classnames you also have to adjust the stylesheet.

<div class="content">
	<div class="my-scroller__wrapper">
		<div class="my-scroller__content">
			<p>... Content ...</p>
		</div>
	</div>
	<div class="my-scroller__bar">
		<div class="my-scroller__track">
			<div class="my-scroller__handle"></div>
		</div>
	</div>
</div>

Initialize scrollr with the following options

var myScrollr = $('.content').scrollr({
	generateMarkup: false,
	elementClass: 'my-scroller',
	elementPreloadingClass: 'my-scroller--preloading',
	elementDisabledClass: 'my-scroller--disabled',
	wrapperClass: 'my-scroller__wrapper',
	wrapperDraggingClass: 'my-scroller__wrapper--dragging',
	contentClass: 'my-scroller__content',
	barClass: 'my-scroller__bar',
	barVisibleClass: 'my-scroller__bar--visible',
	trackClass: 'my-scroller__track',
	handleClass: 'my-scroller__handle'	
});