LIVE PREVIEWBUY FOR $10

Lazybars is a straightforward to make use of, themeable scrollbar, jQuery plugin.
You’ll be able to implement these scrollbars simply by including a category identify to to any scrollable ingredient in your web site.
Make use of the themes which can be bundled with Lazybars, or create your individual with some easy CSS.
One common license permits you utilization on one web site.

Newest Lazybars model 1.6.5 (twentieth February 2018)

Documentation | Changelog | Comments | Examples | Support – FAQs

In case you like Lazybars, please spare a second to price it… Thanks.

Assist

In case you want help, please use the support forum and FAQs. I’ll get again to you as quickly as attainable. Any direct messages could also be delayed response.

To stick to Envato market help terms and conditions, Assist can be offered for six months after buy with an choice to increase throughout buy.

In case you discover any bugs and/or wish to recommend any options then please go away a remark and they’ll all be learn and regarded.

Fast begin information

As a result of this can be a jQuery plugin, you will want to be utilizing jQuery in your web site.

  1. Add the lazybars folder to the general public folder in your server.

  2. Hyperlink Lazybars CSS to your web site, within the <head> tag. 

    <!-- Lazybars stylesheet -->
<hyperlink rel="stylesheet" sort="textual content/css" href="lazybars/css/lazybars.min.css">

  3. Add Lazybars Javascript beneath the jQuery library. 

    <!-- jQuery -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Lazybars Javascript -->
<script src="lazybars/js/jquery.lazybars.min.js"></script>

  4. Add the category identify lazybars-x or lazybars-y to any scrollable ingredient in your HTML 

    <div class="lazybars-y">
    ...
</div>

Instance HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazybars instance web page</title>
        <!-- Lazybars stylesheet -->
        <hyperlink rel="stylesheet" sort="textual content/css" href="lazybars/css/lazybars.min.css">
    </head>
    <physique>
        <div class="lazybars-y">
            ...
        </div>
        <!-- jQuery -->
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="lazybars/js/jquery.lazybars.min.js"></script>
    </physique>
</html>

Choices

There are a number of choices so you may customise Lazybars. You may make use of those choices utilizing knowledge attributes. 

<div class="lazybars-y" data-position="left" data-fade="true" data-offset="-5">
    ...
</div>

For a full checklist of choices and superior implementation please check out the Documentation


Source