Scrollbar

Hello, how to custom the scrollbar with vaadin for all my website? Classic webkit-scrollbar in styles.css do not seems to work at all with Vaadin.

Vaadin does not use any kind of custom scrollbars, so there is nothing Vaadin-specific about this.

It does depend on which scrollbar you’re trying to style though. The page scrollbar, or the one in some component (e.g. AppLayout)? Since scrollbars inside components might be in the component’s shadow DOM, they might not be affected by global css targeting simply ::-webkit-scrollbar, in which case you need to target the shadow DOM element containing the scrollbar explicitly.

Using AppLayout as an example, the content area scrollbar is in a div with the content attribute, so you need to inject the scrollbar CSS into the AppLayout’s shadow DOM, targeting that element like so:

[content]::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa;
}``` 
(in `components/vaadin-app-layout.css`)

I am talking about the page scrollbar, so this is why I don’t understand why ::-webkit-scrollbar do not work

yeah no me neither. It works for me.

Well, I am doing something wrong then. I am using a generated project from start.vaadin.com and I want to change this scrollbar (see picture). I would be glad if you could give me the exact code to apply my changes for this one?
image.jpg

I am probably missing something with styles & Vaadin, I guess your help on this will help me a lot understanding all of this

I don’t think that’s the page scrollbar actually – I think that’s the scrollbar for the content part of the AppLayout (and if so, the code I posted above should work)

What I am doing wrong then?
image.png
image.png
image.png
image.png

not sure

no need to @import the app-layout stylesheet – stylesheets in the components folder are automatically injected into the component’s shadow dom
(it should not interfere with the injection though, so that doesn’t explain why it isn’t working)

are you applying the theme with @Theme("your-theme-folder-name") ?

Yes I do

It is from the Vaadin starter

I am using Vaadin 23, I tried everything I could find on google and nothing is working

ok, try applying some other css to the applayout, and see if that is applied, e.g.

  outline: 1px solid red;
}```

Doesnt seem to be applied

Maybe the component injection do not work or vaadin-app-layout isn’t proper name?

vaadin-app-layout is the name of the component’s root element so it is correct.
Not sure why the injection would not work. Let’s try something else…

[part=“drawer”] {
background: red;
}

(in the same stylesheet)