Demo

How To Use

1. Include Well Scroller plugin files

Important Scroller stylesheet
    1. <link rel="stylesheet" href="/styles/scroller.css">

Customize view stylesheet (used in this demo)
    2. <link rel="stylesheet" href="/styles/customScrollerView.css">

Include Well Scroller plugin
    3. <script type="text/javascript" src="js/wellScroller.js"></script>
                

2. Set up your HTML

You need to know that if you want, you can redefine only main scroller selector (.scrollBox). Others are getting inside a plugin.

Scroller structure without scrollDown button (examle 1)

	<div class="scrollBox">
		<div class="viewport">
			<div class="overview">
			     YOUR CONTENT
			</div>
		</div>
		<div class="scrollbar"><div class="thumb"></div></div>
	</div>
					

Scroller horizontal structure (examle 2). Don`t forget to set to content wrapper (p - for example )some fixed width value for overflow.

	<div class="scrollBox horizontal">
		<div class="viewport">
			<div class="overview">
			     <p>YOUR CONTENT</p>
			</div>
		</div>
		<div class="scrollbar"><div class="thumb"></div></div>
	</div>
					

Scroller structure with scrollDown button (examle 3)

	<div class="scrollBox">
		<div class="viewport">
			<div class="overview">
			     YOUR CONTENT
			</div>
		</div>
		<div class="scrollbar"><div class="thumb"></div></div>
	</div>
	<button class="scrollDown">Scroll Down Text</button>
					

3. Set up your CSS

Scroller has some css rules for correct work, but you need to set your own styles
(height of scroller and horizontal rules for scrollbar and thumb if you want use scroller in horizontal orientation)

Rules of example 1 (only set scrollbar height and width. About width - if you use some wrapper with fixed width, it`s unnecessary)

You can use max-height or height
    .scrollBox {
        max-height: 470px;
        width: 270px
    }
					

Horizontal rules of example 2 (set scroller height and customize view of scrollbar and thumb)

	.scrollBox.horizontal {
		width: 270px;
		height: 345px;
	}

	.scrollBox.horizontal .overview {
	   padding-right: 0;
	}

	.scrollBox.horizontal .viewport{
		height: 95%;
	}

	.scrollBox.horizontal .scrollbar {
		position: absolute;
		height: 10px;
		left: 0;
		bottom: 0;
	}
	.scrollBox.horizontal .thumb {
		height: 100%;
	}


	.scrollBox.horizontal p {
		width: 600px;
		height: 100%;
		margin: 0;
		text-align: left;
	}
					

4. Call the plugin

Now pass in to the scroller your parent container (scrollBox by default) and some configure options, if you want.

    Plugin call syntax looks like this:
        wellScroller(elem, options);
        @param elem {HTMLElement} -> parent scroller container
        @param options [Object] -> some scroller config

     Example from demo call
    Simple vertical scroller with default options (Exapmle 1)
         wellScroller(document.querySelector('.scrollBox'));

    Horizontal orientation  (Exapmle 2)
         wellScroller(document.querySelector('.horizontal'), {
                        axis : 'x'
                     });

    With scroll down buttons (Exapmle 3)
         wellScroller(document.querySelector('.scrollBox'), {
            scrollDownBtn : document.querySelector('.scrollDown')
         });
                

Customizing

1. Options

Set in options object - second parameter in scroller call.

Variable	Default	Type	Description
axis	y	string	axis of scroller orientation (vertical or horizontal)
wheelSpeed	40	int	Wheel speed modifier
wheelLock	true	boolean	Lock default window wheel scrolling when there is no more content to scroll.
touchLock	true	boolean	Lock default window touch scrolling when there is no more content to scroll.
thumbSize	false	boolean	Set the size of the thumb to auto(false) or a fixed number
thumbSizeMin	20	int	Minimum thumb size
marginTop	false	boolean	Use 'margin-top' or 'top' to elements position /td>
marginLeft	false	boolean	Use 'margin-left' or 'left' to elements position
scrollDownBtn	none	HTMLElement	Scroll Down Element for scroll down button possibility

2. Well Scroller core methods

Some useful methods that you can use in non-standart situation.

Update all scroller values
(can used when scroller content dynamically changed - can be used with setInterval or requestAnimation or any other your technique)
    wellScrollerInstance.update();
                

Update all scroller values with save thumb position 
    wellScrollerInstance.updateAndfixScrollBar();
                

Sviatoslav Barbutsa 2015 / Wellnine / email