how to change the style of the scrollbar of a TWebPanel ?

WEB TMS WEB Core
1

How can I change the style of the scrollbar of a TWebPanel (or a TWebScrollBox) ? I would like to change opacity for example, or make it rounded and only visible when scrolling. (like those we found almost everywhere )

I tried to change some properties with ElementHandle.style, for example

  WebPanel1.ElementHandle.style.setProperty('overflow-y','auto');
  WebPanel1.ElementHandle.style.setProperty('scrollbar-color','blue green') ;
  WebPanel1.ElementHandle.style.setProperty('scrollbar-width','thin') ;

but still I cannot change the opacity or border radius of the scrollbars.

And also, this works with Firefox but not with Chrome.

(I have the same results when using the TWebCSSClass component)

Any suggestion ? may I have missed something obvious somewhere ?

thank you

with Firefox :
scrollbar with firefox

with Chrome
scrollbar with chrome

2

In my experience, getting scrollbars to look just the way you want, with whatever theme customizations or interactivity you're after, is notoriously difficult. Exponentially more difficult when you want Firefox, Chrome, and Safari to look and work the same way. CSS can be applied, but it isn't the nice and friendly type of CSS but rather the kind where you have all kinds of browser-specific selectors and that sort of thing.

I've had pretty good success simply replacing them with something else, such as the Simplebar JavaScript library.

I've used it with great success in a handful of TMS WEB Core projects. And it is pretty simple to use, with the ability to define the CSS for what you want to customize in a way that is far less troublesome. It works by wrapping your page elements with its own elements which can then be controlled and customized a little more easily.

While it isn't perfect, it helps with a lot of this kind of thing. I used this, for example, in the HexaGongs project that appeared on the TMS Blog, where I wanted the scrollbars to have a completely different theme. You can read a bit about that in the third part of that series, in the section on custom scrollbars.

Hopefully, others here will chime in with some of their solutions to this as well. It is one of the last areas where browsers still render additional elements on their own, sometimes beyond the reach of what HTML and CSS can control.

3

thank you, I'll look into it further.
I had already said to myself that I should take more time to look deeped at all the articles you've written in the blog, as there is a lot of very valuable information to be found there. :nerd_face: :+1:

4

Thanks, that's what they are there for! There's a lot of material that might not be all that interesting 99% of the time, but that 1% of the time it might be just what you're after.

The HexaGongs series in particular seemed to be not that interesting at all to a few folks, but really it is the set of posts with the most UI work, which is most often where people are likely to encounter things they want to change.

Be sure to post any follow-up questions.