Documentation

2nd October 2017

Setup

  1. Upload the lazybars folder to the public folder on your server.
  2. Link Lazybars CSS to your site, in the <head> tag.

    <!-- Lazybars Default stylesheet -->
    <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">
    
    <!-- Optional stylesheet -->
    <link rel="stylesheet" type="text/css" href="lazybars/theme/lazybars.thin.css">
  3. Add Lazybars Javascript below the jQuery library.

    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    
    <!-- Lazybars Javascript -->
    <script src="lazybars/js/jquery.lazybars.min.js"></script>
  4. Add the class name lazybars-x or lazybars-y to any scrollable element in your HTML

    <div class="lazybars-y">
        ...
    </div>
Example HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Lazybars example page</title>
        <!-- Lazybars Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">
    </head>
    <body>
        <div class="lazybars-y">
            ...
        </div>
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="lazybars/js/jquery.lazybars.min.js"></script>
    </body>
</html>

Options

Options can be passed via data attributes or Javascript. For data attributes, append the option name to data-, for eaxample data-offset="10"

Name Default Description
position 'top' | 'left' 'top' | 'bottom' | 'left' | 'right' - Position of the scrollbar.
offset 0 Integer value to determine to offset value of the scrollbar relative to the scrollable element in px
fade false Boolean value to activate or deactivate the auto hide functionality
animate true Boolean value to activate or deactivate the scroll animation functionality
draggable true Boolean value to activate or deactivate drag / touch scrolling on viewport
scrollable true Boolean value to activate or deactivate scrolling on whole element
speed 1 Multiplier value to control the scrolling speed
Example HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Lazybars example page</title>
        <!-- Lazybars Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">
    </head>
    <body>
        <div class="lazybars-y" data-position="left" data-offset="-5">
            ...
        </div>
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="lazybars/js/jquery.lazybars.min.js"></script>
    </body>
</html>

Via Javascript

You can also add a Lazybars scrollbar to a scrollable element with an id scrollMe

$('#scrollMe').lazybars(options)
Example HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Lazybars example page</title>
        <!-- Lazybars Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">
    </head>
    <body>
        <div id="scrollMe">
            ...
        </div>
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="lazybars/js/jquery.lazybars.min.js"></script>
        <script>
        	$('#scrollMe').lazybars({
        		position : 'top',
        		offset : '10'
        	});
        </script>
    </body>
</html>

.lazybars(options)

Adds Lazybar scrollbars to the given element. Accepts an options object.
$('#scrollMe').lazybars({
	position : "top",
	offset : 10
});

Methods

Refresh

Can be called after Lazybars has been initialised on an element.

$('.lazybars-x').lazybars('refresh');
Example
$('#slide-trigger').click(function() {
    $('#slide-element').slideDown(function() {
        $('.lazybars-x').lazybars('refresh');
        $('.lazybars-y').lazybars('refresh');
    });
});

Scroll

Can be called after Lazybars has been initialised on an element.

$('#my-scroll').lazybars('scroll', 100);
Scroll accepts one of three options - "start", "end" or integer - integer is a px value for scroll position
Example
$('#slide-trigger').click(function() {
	$('#slide-element').slideDown(function() {
		$('.lazybars-x').lazybars('refresh');
		$('.lazybars-x').lazybars('scroll', "end");
	});
});

Scrollable

Can be called after Lazybars has been initialised on an element.

$('#my-scroll').lazybars('scrollable');

Scrollable can accept a boolean argument to activate or deactive a given lazybars element.

$('#my-scroll').lazybars('scrollable', true);
Returns boolean true | false.
Example
var isScrollable = $('#my-scroll').lazybars('scrollable');

Animation

Can be called after Lazybars has been initialised on an element.

$('#my-scroll').lazybars('animation');

Animation can accept a boolean argument to activate or deactive animation on a given lazybars element.

$('#my-scroll').lazybars('animation', true);
Returns boolean true | false.
Example
var animationActive = $('#my-scroll').lazybars('animation');

Draggable

Can be called after Lazybars has been initialised on an element.

$('#my-scroll').lazybars('draggable');

Draggable can accept a boolean argument to activate or deactive drag / touch functionality on a given lazybars element.

$('#my-scroll').lazybars('draggable', true);
Returns boolean true | false.
Example
var isDraggable = $('#my-scroll').lazybars('draggable');

Events

All events return the event and a data object

Example
$('.lazybars-y').on("lb.ready", function(event, data) {
	...
});

All event data objects contain:

  • id of the lazybars element
  • axis of the scroll
  • position of the scrollable content in pixels relative to the lazybars element
  • percent that the scrollable content has been scrolled


lb.ready

lb.ready event fires when lazybars is loaded and the element is ready to scroll

lb.start

lb.start event fires when the scrollable element reaches the beginning of its scrollable content.

lb.end

lb.end event fires when the scrollable element reaches the end of its scrollable content.

lb.scroll

lb.scroll event fires when the scrollable element is scrolling through its scrollable content.

lb.refresh

lb.refresh event fires when the lazybars element is refreshed using .lazybars('refresh');