How to customize css scrollbar

Support
,
1

How can I customize the CSS scrollbar in Jmix 2.4.3 when elements are inside the Shadow DOM, and the ::-webkit-scrollbar rules do not apply?

::-webkit-scrollbar {
    width: 6px;
    /*height: 5px;*/
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--template-page-details-container-footer-color-stroke);
}
2

Same problem

1 Like
3

Hi

It is hot a recommended way to style the scrollbar, because the Vaadin web-application use the system scrollbar. Styling it can lead to display problems in different browsers and on mobile devices.

Using -web-kit styles will be ignored by Firefox browsers.

If you still want to style the scrollbar in Shadow DOM, you should refer to the Vaadin documentation: https://vaadin.com/docs/latest/styling/advanced/shadow-dom-styling

Dmitriy

1 Like