Listbox With External Scrollbar

For anyone who is interested, here’s a tiny class that allows a listbox to be controlled by a scrollbar that is not part of the listbox. It works with the mouse wheel as well and auto hides as needed.

Very cool! Works great on win. Would this work on weblistboxes?

Good question! I don’t know. Try hooking it up and see! :slight_smile:

It won’t work out of the box. WebListBox simply does not have ScrollPosition, so there is no way to couple the ScrollBar. It is possible to get and set the ScrollPosition in pixels, but that requires some extra JavaScript code…

@Michel Bujardet In your experience, is there a fairly simple solution for replacing the weblistbox scrollbar to make it look a little more native (no disappearing trick necessary), or is it more trouble than it’s worth?

There is no simple solution. The structure of the WebListBox is such that scrollbars are in fact always there in the DOM, except they are invisible when not needed.

I have been working for a while on a better WebListBox with attributes of the desktop one. I could try to come up with a Mac style scrollbar.

However, you got to realize that a Web app rarely is visited only by Macs with Magic Mouse, TrackPad or corded mouse with a ball. Even without the disappearing act, you got to make sure people with non-wheel mice can use the app, just as well as mobiles.

Very nice. But is it just me - the scrollbar does not properly ( if at all ) show the last item in the listbox? ( Windows ).

I just took a peek. You wouldn’t need to come up with a scrollbar if you set the div wrapper for the table to overflow: scroll. It would use the OS provided scrollbar.


Here’s an updated link to that:

And a fix. Any call to set listbox.scrollposition causes an invalidate so you shouldn’t call it repeatedly even if setting it to the same value.

This class has been updated to scroll more accurately and less aggressively, particularly on Windows.

1 Like