Changing Panel Scrollbar Style

Hey all!

I created a panel for the queue in a web based media player i am creating. When the queue takes up too much of the window, vaadin makes a scrollbar that allows the user to scroll up and down the queue.

Only problem is, the scrollbar looks a bit out of place in comparison with the rest of the application, and i can’t figure out how to make it look any better.

Any help with this would be much appreciated!

HI,

On a technical level, it quite tricky. You see, the scroll bars are provided by the browser. Browsers - as a rule - don’t allow you to style the scroll bars. IE used to - and no doesn’t any more. However, I’ve just seen that
Webkit browsers (such as Chrome & Safari)
do allow you to style scrollbar via CSS.

In addition, it seems that there is a
jQuery plugin (scrollpane)
that allows you to do all sorts of customization - but my experience with combiding jQuery & Vaadin is limited. See
this stack overflow question
for a bit more detail

HTH a little,

Cheers,

Charles.

Some Google web applications etc. completely bypass normal scrolling in browser and replace it with their low-level mechanism for catching scroll events, showing a “scrollbar” they draw themselves, rendering the visible part of the content at a fixed position etc. Maybe the jQuery plugin does the same.

Apart from that approach (a major undertaking), the possibilities of customization are limited as Charles said.

Hi
Can you tell which solution you adopted to resolve the scrollbar style?

When I was evaluating the framework I notice this problem. You should review all the components with other themes. The are some inconsistencies in tables and selectors scrollbars. Also look at “Large dataset” example in Chrome on dark theme.
The “Basic features” example has good looking scrollbars, can’t be used for other components?
You should improve this, it looks unprofessional. It’s a shame how a small detail can ruin the whole aspect of an application.
Also there are some problems with resizing grid components in the examples.

I’ll just leave this here if other people find this thread and/or are looking into how to customize their WebKit scrollbars:
https://css-tricks.com/custom-scrollbars-in-webkit/
.

Can you PLEASE deliver a encapsulated solution for scrollbar.
The framework is to keep developers away from browser specific implementation :slight_smile:

Is this solved, or iis it just the demo that is not updated?