Discussion on Lazybars - CSS Themeable Responsive Scrollbar jQuery Plugin


LazyBearOnline supports this item


18 comments found.

Thank you for the comment. Hope you find my code useful.

Beautiful! However, in Chrome on Mac OS Mavericks, the default scrollbar is still appearing next to LazyBars.

Thank you for the comment and feedback. I will send you a private message through CodeCanyon, I would appreciate it if you could provide a screenshot as I have not been able to replicate the issue in Chrome on Mac OS Mavericks. :)

When I look at the demo and set the browser window to a small width I see two sliders side by side – one from the script and one standard slider from the browser. (Tested in Firefox, Safari and Chrome on OS X Mavericks and Firefox + IE11 on Windows 7). So set your browser window to a small width and see what happens.

Thank you very much for you feedback. I was able to recreate the bug and I have issued an update – version 1.2.1 – Please check the Changelog for details and test the examples page again to verify that it works.

One question about plugin – is it responsive (adoptable to window height change?).

I have a case with a fixed sidebar panel which is hidden on page load and than slides out on a click and it contains area which needs responsive scrollbar.

Thanks in advance for answer.

Hi kwisko,

The plugin was built to run this way, however, I have just run some tests to simulate your requirements and have found a bug. I have issued a fix as version 1.2.2 – when this is approved I suggest you use the refresh method that you can call on the plugin after it has been initialised.

Here is an example:
$('#slide-trigger').click(function() {
    $('#slide-element').slideDown(function() {

I hope you enjoy Lazybars.

Ok, Thank you for your answer. I’ve purchased your plugin yesterday and now wait for the version 1.2.2 to be approved.

Thank you for purchasing Lazybars. You should be informed when the update is approved. If you need any support, please get in touch. Have a great day.

Hi LazyBear. I recently purchased your cool plugin and it doesn’t work for me on an iPad / iOS 7 Safari. Here’s the URL:


After the site loads and you click continue. The access the menu click the top right menu button. That scroll bar works on desktop but not tablets for us.

Does LazyBars support Touch/Tablets?

Hi murmurco,

Lazybars does support Touch/Tablets. I am sorry you are having some issues. I will look into it for you and get back to you as soon as possible.

Thank you for your interest in Lazybars. Have a great day


Hi murmurco,

In your function showMenuOpenState(), add:


This should trigger the bar to refresh and appear on iPad.

Let me know if you are still having issues after that and I will try to assist you further.

Have a great day


Any way to get this to work in Firefox? You get both your scroll bar and the default one. This goes for my piece i’m working on but if you view your samples in Firefox, you get the same thing.


Hi inkling,

Thanks for reporting this. I will look into it immediately and get a new version up as soon as possible.

Have a great day

Hi inkling,

I have issued an update for Lazybars – version 1.2.6 – When it has been approved you can get your hands on it to fix the bug.

Sorry for the inconvenience.

Enjoy Lazybars.

Have a great day LazyBearOnline

I had a question / feature request:

In my lazybars implementation I am appending many new items to the bottom of a list. I’m using the refresh method after each append and everything is working great. But the best UX for this would be if the scrolling area was always scrolled all the way down, as the latest information is added to the bottom of the scrolling area. Is there a way to force lazybar to scroll to the bottom of the scrollable content?

Thank you!

Actually, I think the wrapper is a good idea for the product, it just took me a bit to change my CSS to account for it. Since you have that wrapper now, I would just suggest one more feature for the next version: In my implementation I have areas that scroll if enough content fills them, but there are situations in which they might not invoke a scrollbar. I’m using an additional function that checks the scrolling area to see if a lazybar-y or lazybar-x is present and adds or removes the class “hasScroll” to the wrapper div. This allows me to add additional padding on that class to account for the scrollbar, without having that padding when there’s not a scrollbar present. Make sense? Anyway, since you are adding the wrapper div now, it might be nice to have a class on that div that indicates whether there is a scrollbar in it or not. I’m sure other people would find that useful as well.

Hi jesthered,

Thank you for the feedback, I’m glad you think the wrapper was the right move.

I have taken your feature request and updated to 1.4.0.

Now you can call scrollable on your lazybars element to find out if the element will display lazybars (is scrollable) or not.

$('#my-content').lazybars('scrollable'); will return a boolean value (true || false).

Give it a try and let me know if all is ok.

Have a great day

Also, you will want to grab 1.4.0 because there is another new feature.

You can add data-drag="true" to a lazybars element to make the whole element touch scrollable as opposed to just the scrollbar being interactive.


Doesn’t work for me. I created the simplest website with just a scrollable box and it doesn’t work at all. what a waste of money.

Good morning chickenfrommars,

It is unfortunate that Lazybars is not working for you.

Lazybars is purchased with lifetime support and I believe that you will find it more constructive, for you and the other amazing people who have chosen Lazybars, to ask for assistance than write negative comments about the product.

I will help you get Lazybars working if you would like. As you can see from many of the comments attached to the Lazybars product, support is provided as quickly and efficiently as possible.

Please review the documentation – http://lazybars.suiji.co.uk/documentation.html and reply to this message with a link to the “simplest website with just a scrollable box” and I will take a look to help you resolve the issue.

Have a great day

Hi, i’ve succesful integrated LB in my page, inside a row in bootstrap layout. Scrolling works fine, even is i stretch closing the window. But after that, when i enlarghe again the website, the scroll (and the scrolled div) remains tight (do not enlarge to the original width). LB is treiggered by class in div, and i’ve also tried to add the refresh functions, without success. Can you please help me?


Hi Diz,

Thank you for purchasing Lazybars.

I would be happy to help you out. Can you provide me with an example of the code you are using so I can diagnose the issue and help you to resolve it.

Please send your code sample to support@lazybearcreations.co.uk and I will reply as soon as I have a solution for you.

Have a great day

Hello, thanks for fast reply. I’ve just solved adding .lazybars-wrapper { width: 100% !important; }

so the wrapper and the bar expands ever to the max container width.

thanks anyway!

Glad you managed to solve the issue.

Have fun using Lazybars.

Have a great day Lazybear

To the Lazybars community.

Thank you for purchasing and making use of Lazybars, I hope your experience has been a good one.
You are awesome for giving it a chance.

If you have managed to use Lazybars in production anywhere on the internet, I would love to see how it is being used and maybe even showcase some of your work on the Lazybars website.

Please send through a link to your work and a short description of how you used Lazybars to admin@lazybearcreations.co.uk – If you do not want it to appear on the website just let me know, I would love to see it anyway.

Have a great day Lazybear

hey mate, works great apart from the annoying part where if you apply lazybars-x to an element you lose vertical scroll using scrollwheel on the entire page if mouse is on top of the lazybars wrapped element. Here’s the fix I used to remedy that:
//line174: if max, apply scroll delta to the window instead
if ((self._viewport[self._scrollTo] > 0) && (self._viewport[self._scrollTo] < max)){
    $(window).scrollLeft($(window).scrollLeft() + mouse.wheelX*10);
    $(window).scrollTop($(window).scrollTop() + mouse.wheelY*10);
    return false;

Hi DrOhReally,

Actually, I have just understood your issue.

You are saying that you lose scrolling completely, even when you reach the end of the scrolling window of the Lazybars element.
Is that correct?

Have a great day

Hi DrOhReally,

I have issued an update which is in review at the moment so please download version 1.5.2 unless you are happy with your fix.

Have a great day

Yea that was pretty much it, I have a div that scrolls horizontally with lazybars but the page was long enough to scroll vertically, as soon as the mouse is over the div you lose scrolling vertically. Thanks for the fix :)

Hi, I thought it would be easier to make it work but is taking more time than what i expected.

I think my problem is in that you don’t provide an actual working example with just a simple text. I tried to copy and paste the demo but that didn’t worked either.

This is what I have right now
 <!DOCTYPE html>

        <title>Lazybars example page</title>
        <!-- Lazybars stylesheet -->
        <link rel="stylesheet" type="text/css" href="css/lazybars.min.css">
        <link rel="stylesheet" type="text/css" href="theme/lazybars.thin.css">

        <div class="lazybars-y">
            <p>Lorem ipsum dolor sit amet, ex his esse clita, ne duo facete sanctus, sea quot soluta denique cu. Vel tempor blandit suscipit no. Dolores accusamus theophrastus eum an. Mea movet maiorum te, ex liber ubique nemore usu, duo paulo appetere officiis ei. Eu mea timeam omittam pericula, euismod accumsan adipiscing mea te. Et novum eirmod eos. Noster recteque his ad.
              Mel falli voluptua lobortis ne. Eligendi deleniti imperdiet quo eu, nec no quas essent elaboraret. His esse insolens delicata no, dicta audiam senserit an vim, ad sea omnis denique deserunt. Labore patrioque vix in, nisl inciderint quo an. Sit noluisse explicari ne, sit ut appareat abhorreant.
              Vim ea sonet mediocrem, ne pro exerci sanctus. Ex omnis conclusionemque duo. Ius in vidisse recusabo constituam. Ipsum quidam eu vis, quo ne novum eripuit delicatissimi. Velit liber ullamcorper mel an.
              Cuando oratio contentiones sea. Vidit appareat eu eam. Pri te tation audiam maiestatis, ei sea novum mnesarchum, at numquam similique mea. Id vis etiam contentiones, nec at reprimique interesset, dicam vidisse sadipscing et usu.
              Everi vivendum reprimique ad, his et velit indoctum. Mel ad magna erant zril. His quidam ocurreret ne, est ne minim dolorem. No case democritum mei, vel ex lobortis elaboraret, nec sale scripserit liberavisse eu. Veniam tractatos ius ea.
        <!-- jQuery -->
        <script async src="js/jquery.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="js/jquery.lazybars.min.js"></script>

I have this code at index.html, this is my file structure css/ lazybars.css lazybars.min.css js/ jquery.min.js jquery.lazybars.js jquery.lazybars.min.js theme/ lazybars.thin.css lazybars.thin.min.css index.html

Hi divxpr,

Sorry you are having trouble with Lazybars.
Let me try to help you.

I may not have made it clear in the docs but the lazybars container has to contain scrollable content, meaning that the content has to be larger than the lazybars container for the bars to appear. Exactly how you would expect the browser to add scroll bars when you have scrollable elements on your page.

I will look into adding some examples into the download and updating the docs.
Thank you for bringing this to my attention.

Here is a snippet of what I added to your code above to display the Lazybars.

    <title>Lazybars example page</title>
    <!-- Lazybars stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/lazybars.min.css">
    <link rel="stylesheet" type="text/css" href="theme/lazybars.thin.css">
    <style media="screen">
        .lazybars-y {
            height : 40px;

You can add the styles to your own css and even add another class name if you prefer.

Have a great day

Hi, I’m currently trying to get the plugin to work on a website I’m working on. The css file is loading properly. But when the page loads the jquery.lazybars.min.js file the page doesn’t work properly.

I’m getting a “this.scrollable is not a function” error in Chrome Page inspector. It says it’s an error in the js file on line 6.

What should I do to fix it?

Hi joelmeta,

Thank you for contacting me about this issue.

Please give me some time to take a look for you and I will get back to you as soon as I can.

Have a great day

It’s working now. Had multiple problems, but setting a proper delay on the lazybar element refresh was one of them.

Great to hear that it is working for you…

Please could you share the issues so I can see if anything needs fixing and release a new version to patch the bugs.

Also, if you could share how you resolved those issues as an interim for other users to benefit from your discoveries.

Thank you in advance.

Have a great day

The style of the scrollbar is really nice. However, when I scroll the content using the scroll wheel of my mouse, it’s scrolling quite slow, compared to the scroll speed of the page. Is this something that’s configurable?

Hi tjveldhuizen,
Thank you for the comment.

The scroll speed is not configurable however the it should be the same as the native scroll speed of the browser.

I will take a look and see if there is anything I can do.
Could you please send me some details of which browser you are using and on which operating system so I can replicate the situation.

Have a great day

I am looking at the live preview with Google Chrome 55.0.2883.75 beta (64-bit), on Windows 10. However, MS Internet Explorer and MS Edge do the same. In all those browsers, I need to scroll the wheel two or three times, while scrolling the full page is done in less than a half. Firefox is the only browser on my PC where it, indeed, is scrolling fast.

Beautiful work GLWS

Hi st1s,

Thank you so much for your comment. It makes my day when someone appreciates the work, it’s even better when my work makes a task easier for someone.

Have a great day, an amazing 2017 and good luck with all your endeavours.


bisch23 Purchased

Hello, very useful quick script extension. One question: Can you have the scrollbar start at the bottom instead of the top? I am using lazybars-y with a chat window and newest chats are coming in at the bottom. Right now I would have to scroll to them.

Hi bisch23,

Thank you for purchasing and using Lazybars.

Here are two options for you.

  1. If you want the scrollbar to start at the bottom, you can add data-position="bottom" to your element and this will start the scroll at the bottom of the contents.
  2. If you need to update the content dynamically and you would like the scroll position to display that new content after an update then you can add $('.lazybars-y').lazybars('scroll', "end"); at the end of the update script.

I hope this helps you and just so everyone knows – these solutions are already documented in the Lazybars Documentation.

Have a great day
Lazybear Creations

HI, I can’t seem to get your script to work. I followed the documentation but there’s not dimensions to it and everything displays. I also copied the code on your example but it contains set widths which I need them to be responsive. Could you give me an example that will work. Thanks!

Hi galfaro1985,

Sorry you are having trouble implementing Lazybars.

I will be happy to discuss issues with you privately so as not to flood the comments and any resolutions I will post back here for the community.

Have a great day

Hi, most of my css keeps getting overwritten. There’s seems to be to much control over my design and your script is not working correctly for me. How can we resolve this issue. The issue that I’m having is with the scroll-x and the dynamic width. It also seems to not be auto adjusting which I highly need for my website.

I’m not sure if I’ll be able to use your script. Could you send over something that works with full control, or if it’s simpler refund me.

Hi galfaro1985,

If you would like to resolve the issues I will discuss directly and post back to the community and maybe you can contribute to making Lazybars better for you and for the whole community.

I look forward to your contribution.

Have a great day

Email me code snippets and examples of how you are implementing LazyBars and I will get back to you with a solution or an update: support@lbc.email