Discussion on VenScrollBar - A jQuery Scrollbar Plugin

Discussion on VenScrollBar - A jQuery Scrollbar Plugin

Cart 123 sales

stephenbunch does not currently provide support for this item.

26 comments found.


In the live preview, I’m able to scroll with gesture swipe up and down on the content (Firefox with touch scren). But after downloading and trying the demo provided, I can no more. Script call and parameters seems to be strictly similars. This functionality will be important for my project.

Best regards

Hi, I want to buy your script, but i made some tests and it looks like it doesn’t work well on IE9 (didn’t test yet on IE7 and IE8 ).

Try to scroll down with the mouse wheel and see that the page move.

If you can fix it and make it work on all browsers i’ll buy it.

Hi there – I just purchased your scroller. I am looking forward to getting it going in my project, however I am fairly new to jQuery, actually most programming libraries, so, are there clearer instructions? I have the css and js called on and linked. The text is scrolling within a div but by mouse wheel only – cannot see the scroller.

Appreciate any help – thanks – stutterdot

Hi! Could you email me your html at bunchclone[at]gmail[dot]com so I can look at it and further debug the issue? Thanks

On page load the default scroll bars are visible for a moment. Is there any way to avoid this?

I have done exactly that. No luck.

Can you email me the files you’re working with? I can look at it tonight.

Well, not having looked at the code yet, all I can say is you’re seeing a scroll bar temporarily because it takes longer for the script to download and execute than it does to render the page.

//p.$inner.css({top //p.$bar.css({top commented out these lines and all was well

Glad you were able to find a solution!

When I add new content, I call the refresh method. How can I do this without having the scroll jump to the top?

Hello, How would you add arrows to the minimal scrollbar?? As it does not seem to work with the ipad, or is there another way to simply make it work on the ipad??

Hi 5h2oom, you can set the withArrows option to True to display the arrows. You’ll have to create your own css and images however, because the minimal theme I provided doesn’t utilize the arrows.

Unfortunately, mobile devices are not supported at the moment.

I managed to get another plugin working (long night!) . I appreciate your help. thanks.

i understand what you are saying, it’s not a quick change because .content is being updated from many places in my code! when you relocate the content are you preserving all event handlers associated with its elements?

Unfortunately, I’m not. I assumed this code would be the first to run. I see what you mean though. I hadn’t thought of this scenario when designing it. For new development, it’s not a problem. But for incorporating into existing code, it can be a nightmare. Sure, find and replace isn’t too hard, but when you’ve got code that depends on children and parents of those selectors, it can be a real pain rewriting all of it. You need like a selector redirector plugin or something.

Also to clarify, the content is being emptied using jquery .empty() and repopulated with content.

No, there’s no need to create it. If you open up firebug or look at the “Markup” section at the bottom of the user guide, you’ll see what I’m talking about. The plugin generates a bunch of html and relocates the content into the .venscrollbar-inner div, so any appending or emptying of content needs to happen on that div or else you’ll mess up the plugin.

Hey N3rd, thanks for the quick response. I’m just using jQuery to append items (divs) to .content.

Are you saying I need to create a new element (.venscrollbar-inner) inside content and have my jquery code populate that instead?


hello, i’m having some difficulty getting the scrollbar to work. what i have is this:

<div id="items-list"> <div class="content minimal"></div> </div> <!-- items-list -->

‘content’ is being populated dynamically using jquery with a bunch of elements.

on page load, i’m executing the following:

$("#items-list .content").VenScrollBar({ push: false, autoHide: false, withArrows: false, barWidth: 13, tBarHeight: 20, bBarHeight: 0, tTrackHeight: 10, bTrackHeight: 10, barHeight: "100%", smoothScroll: true });

the css is this:

#items-list { background-color: #666666; width: 480px; height: 500px; overflow: auto; } #items-list .content { width: 480px; height: 500px; overflow: auto; }

when the container is empty, i see the scrollbar. I can drag the slider all the way down even past the bottom of its track (which is weird) and at that point the standard mac scrollbar pops up.

When i load content into the container, the standard mac scrollbars show up.

I would like to have it along the right edge of the parent container ‘items-list’ floating on top of the loaded items.

hope you can help. I have tried all scrollbar plugins out there and each one has its weirdness and i’m hoping this one works for me.


Hi djeetee, how are you populating the container with content? Make sure you are injecting the content into the .venscrollbar-inner element which will be inside the #items-list .content element. Also make sure you are calling $.fn.VenScrollBar.Refresh(”#items-list .content”) after you inject the content so that the plugin knows to redraw the scrollbar to fit the new content.

hm, it doesn’t work with firefox 3.6 on windows 7. I tried on two computers.

Hmm, I’m on Windows 7 also and it works fine for me. You must have some addon or something that is causing it to not work.

SOLVED thru email. Thank you Stephen. You are the king! :D

Can get it to work on my site… :(

So did you get it working? Or are you still having trouble?


I have a question before buying : Can i use this scrollbar on iframe ?

If yes can you show me an example.


Hmm, I don’t see why not. An iframe is just a page inside a page. It should work just the same. And actually, the Live Preview uses an iframe to display the demo files, so there’s a working example for you already.

don’t work with ff 3.6.8 (3.6.x)

Which operating system are you on? It works perfectly fine in FF 3 .6.x on Windows.

Nice work! Good luck with the sales.

Sounds great! I have just another question; can I use this to replace the main body’s scrollbar instead of just a small div, and will the custom scrollbar automatically refresh or measure the change in the amount that can be scrolled?

The problem I’m running into with a lot of other scrollbar replacements is that they’ll work upon load, but if I resize the window, the scrollbar doesn’t reflect the change in how much you can now scroll (especially if going from a small window and then maximizing it.)

Also, if the content is scrollable, but after maximizing the window it no longer is, will the scrollbars automatically disappear?

Yes, you can use it as a replacement for the main scrollbar. You will have to create your own container though. Whether you use the body element or another div, you’ll need to use javascript to set the height of the container to the height of the window. Then you’ll need to attach an event handler to the window resize event in order to resize your container as well as call the Refresh() method (mentioned in the previous post) to resize the scrollbar.

Hi N3rd,

Before I purchase this item, I had a couple of questions:

- Will the scrollbars work if my content doesn’t use a set height? I’m designing a web-based app so the div the content is embedded with scales with the viewport

- What are the specific problems the plugin has with IE6 ? I understand that it’s not supported (heck, I wish I didn’t have to support it either) but unfortunately it’s a deciding factor.


Hi TruPhan,

If by “set” you mean “fixed”, then no, the content does not need to have a fixed height. In fact, there is a method you can use called $.fn.VenScrollBar.Refresh([selector]) that will resize the scrollbar(s) to fit the current dimensions. So if you wanted to resize the content area, or add more content, Refresh() will redraw the scrollbar so that it is sized appropriately.

As for IE6 , I couldn’t tell you if it works or doesn’t work. I figured that if Google can drop support for IE6 , I can too. So I didn’t even bother to see if it worked or not.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey