HIGHLY RECOMMENDED WEB HOSTING PROVIDER

Lazybars – CSS Themeable Responsive Scrollbar jQuery Plugin

Lazybars – CSS Themeable Responsive Scrollbar jQuery Plugin

LIVE PREVIEW

Lazybars – CSS Themeable Responsive Scrollbar jQuery Plugin

LIVE PREVIEW

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

Latest Lazybars model 1.6.5 (twentieth February 2018)

Documentation | Changelog | Comments | Examples | Support – FAQs

If you want Lazybars, please spare a second to price it… Thank you.

Support

If you want assist, please use the support forum and FAQs. I’ll get again to you as quickly as doable. Any direct messages could also be delayed response.

To adhere to Envato market assist terms and conditions, Support might be supplied for six months after buy with an possibility to increase throughout buy.

If you discover any bugs and/or need to counsel any options then please depart a remark and they’re going to all be learn and regarded.

Quick begin information

Because this can be a jQuery plugin, you have to to be utilizing jQuery in your web site.

  1. Upload the lazybars folder to the general public folder in your server.
  2. Link 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 component in your HTML

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

Example 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>

Options

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

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

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

LIVE PREVIEWBUY FOR $10