flGravity supports this item


This author's response time can be up to 5 business days.

98 comments found.


I have the following construct.

<div style="position: relative; width: 900px; overflow: hidden;"> <div style="width: 1800px; overflow: auto;"> <div style="float: left; width: 900px">...</div> <div style="float: left; width: 900px">...</div> </div> </div>

And I want to scroll horizontal. But it doesn’t work. The rollbar-content is getting the 900px as width instead of 1800px. Is this a bug because of the floating elements? Please help!

Try like so. You put larger DIV into smaller DIV. Plugin should detect it and create scrollbar

<div style="width: 900px;">
    <div style="width: 1800px;">
        <div style="float: left; width: 900px">...</div>
        <div style="float: left; width: 900px">...</div>
No, that doesn’t help :( Here’s a fiddle. Can you take a look at it? http://jsfiddle.net/V2SqL/ Thanks!

Try to add this style

.rollbar-content {float: left;}

Hi, flGravity!

Does your plugin have some kind of a reset() method? If some events which modify scrolling content can occur, making it longer or shorter (thus, not needing a scrool at all or needing it back again), how can the scroll be reset?

Hi! My Rollbar plugin check width/height of content using timer that you can set. If it detects that content has changed, it updates size and position of scrollbars to keep them accurate. Also plugin has api method reset() that sets scrollbars to 0,0 position immediately.

Does reset() update size of scrollbars as well? Or it just sets the position?

Calling “reset” sets position of handle and content to 0,0 (left.top)

Found a bug: rollbar handle loses “left” css property after reset.

It should be so. Left css property is set to 0.

If scrollbar is vertical why even to deal with “left” of the handle? It only makes sense when the scrollbar is horisontal but not vertical.

I need to have 4px-wide rollbar and 6px-wide handle. Naturally, handle should be centered, what I accomplish by settings it’s “left” to (6px-4px)/2. Because of “left”’s resetting the handle falls to right which is not cool.

I set (left:0, right:0) in one statement to optimize the code and don’t check specifically which scrollbar is active. If you want to set “left” css property, you should use ”!important” to override inline style declaration.

Found an issue: when dragging the handle with mouse and leading mouse beyond the borders of rollbar path it starts to select (highlight) nearby content.

I don’t have fix for this. Sorry.

Would this work for a content section within wordpress? My concern is the dynamic content.

Would it be easy to add multiple scroll boxes on a single page?

thank you :)

Hi! My plugin can work with dynamic content. Also it’s possible to add multiple instances of Rollbar to single page.

Good day friend, I have a problem , I’m not able to do the bar always appears below. I need you to stand under the bar when the page is loaded and not on click. $( document ).ready(function() { $('#example2').rollbar({zIndex:100}); $('#example2').trigger('rollbar',1); }); Help me?

$('#example2').trigger('rollbar',1); is correct, however you need to run this with some delay like so
          $('#example1').trigger('rollbar', 1);
    }, 1020);

The reason for that is that rollbar checks content size with interval that you can set via lazyCheckScroll and it is 1000ms by default. See fiddle – http://jsfiddle.net/rg86bkp6/10/

Thank you, but the sample you send didn’t work because we are using a repeater to load the messages in the chat. Do you have any ideia on how to fix the scroll bar on the bottom of the repeater?

Hello. And kudos for creating this very good plugin.

There is a problem with RollBar in Firefox though. It happens when you press the keyboard arrows ( Up / Down ). Is there any way to fix this ?

Also, it would be nice if other keyboard buttons would work when trying to scroll ( PageUp, PageDown, Home, End, etc ).

Thank you.

Hello, please drop me email using mail form on my profile page and I will send you updated JS files. Regarding other keyboard buttons to scroll content, well I don’t plan to add them right now.

Does your tag have a destroy method?

What tag do you mean?


I am trying to get rollbar working on a bootstrap dropdown area. But It seems it will not diplay or use the functionalities of your plugin.

How can I get it to work ? Best regards, Wouter.

But I found a bug in rollbar, I cannot use form input fields when I use rollbar on my site. The site use running on bootstrap.

I fixed this bug. Will upload update shortly. Thanks!


I’ve already got your plugin (as part of company on another account though), and I’ve briefly looked over the minified code. We do not want the plugin to hijack the keyDown strokes, and (oddly) you havn’t made a setting to disable them. I tried deleting the this.bindEvent(i, "keyDown", function(t){});

but it didn’t stop it from hijacking it. Seeing I have the minified code (which is horrible to read), I wondered if you could quickly point me in the right direction.


you can find source in js/jquery.rollbar.js and there is following code which you should comment with /* */

        //keypress scroll with easing

lnml Purchased

Hi, I am getting a js error on initial install… Uncaught ReferenceError: $ is not defined ...on line 164. I have the js and css files loaded in and the script in place. Any idea what the problem is?

You have to link jQuery library which you can download from https://jquery.com/download/

Hi, a presale question. Does this plugin recognize touch events on Win8 touch screen? Thanks

Hi! Unfortunately I don’t have Win8 touch device and cannot test it. You can you Rollbar demo to check it yourself – http://plugins.gravitysign.com/rollbar/

Hi, I used it and its working fine. Issue is all the divs are dynamic and will be in owl-carousel. When I try to move the horizontal scrollbar on one div, all the other divs are moving. How to avoid this.

And also can I change the scroll bar colour while instantiating the rollbar.

Thanks Phani

Hi! Do you move Rollbar with key arrows? Color of handle you can set in .rollbar-handle rule, and color of paths you can change in .rollbar-path-vertical and .rollbar-path-horizontal rules in css/jquery.rollbar.css

no, I’m moving it with mouse only. Those css I changed and its working fine. But my question is if on same page I need to colors for scroll bars, can I do it?

> When I try to move the horizontal scrollbar on one div, all the other divs are moving.

not sure how it happens. Could you provide me a link to your site to take a look?

>But my question is if on same page I need to colors for scroll bars, can I do it?

Please explain what you mean exactly. In my previous reply I explained how ti change colors in jquery.rollbar.css file.

hello, how can i detect the scroll end of the div (for a pagination script ala twitter)???

Hi! You can use “onscroll” callback which accepts 2 arguments – amount of vertical and horizontal scroll as a value from 0 to 1. BTW. “this” keyword inside of callback refers to the container DOM.

how must this write in my code?

For example when you use rollbar for #test DIV element the code may look like this

           // plugin options
           onscroll: function(vs) {
             if(vs === 1) {
                // do something when scrolled to the end

Hi, I would like a refund for my purchase of the Rollbar. It does not work properly. When I click with middle mouse button to scroll it messes up.

I am in a hurry so I won’t have time for you to fix this issue.

Thanks, Alex.

Hi! I can’t give you refund. Please open refund request as described here – https://help.market.envato.com/hc/en-us/articles/202821460-Can-I-Get-A-Refund-

Is there an option that allows the scrollbar to fade out after a couple of seconds?

Hi, yes there is.

 autoHide: true,                // automatically hide scrollbars if not needed 
 autoHideTime: 'fast',        // time to hide scrollbars


I’m currently using a version of nicescroll and the default scrollbars show (very briefly) before the script loads, this makes the page’s content “jump” horizontally, so I have to use media queries and overflow:hidden and sometimes effects larger tablets.

Do you have this issue worked out so the default scrollbars never show on desktop?

Thanks again.

Sorry, I have misinformed you about my plugin options above.

The way that it actually works is next: when you have content that fits nicely in container with Rollbar, plugin won’t show scrollbars as they are useless. Then when you resize window and content starts overflowing container, Rollbar will show scrollbar.

Let me know if you have any other questions!

i have a problem with your plugin and https://github.com/davetayls/jquery.kinetic

so is the cinetic plugin disabled.

when i disable your plugin, works the cinetic plugin.

also the cinetic plugin works not in your rollbar element (on my website take your plugin for body and i have a gallery with thumbnails with the cineticplugin -> horizontal scroll mit mousepointer (mousedown)).

ok, i have the problem solved. i have a wish for a new function. i wish me a horizontal scroll with the mousewheel.

here the solution (change the rollbar.js):

//this Plugin make a pause at following elements //i have added ”|| $(e.target).closest(’.kinetic’).hasClass(‘scrollpause’)”

if(targetNode 'TEXTAREA' || (targetNode ‘SELECT’ || targetNode == ‘OPTION’ ) || $(e.target).closest(’.kinetic’).hasClass(‘scrollpause’)) { e.stopPropagation(); return; }


I’m having trouble uploading the plugin – it comes up with the message:

The package could not be installed. No valid plugins were found.

Was wondering if you could help?

Hello! Rollbar is jQuery plugin and can’t be installed as wordpress plugin.