How do I change the colors of the scrollbar on a TWebScrollBox component?

Question

I have a TWebScrollBox with lots of elements in it, but I don't like the colors of the default scrollbar in it.

This is my scrollbar on the TWebScrollBox:

You can see the scrollbar consists of two different parts:

• A white-ish background color
• And a gray foreground scroll and arrows.

I want to change the color for both of the above two parts.

I looked for a scrollbar color property, but couldn't find one.

Is it somehow possible to change the colors on the scrollbar without using a CSS file or CSS class? I want to do it just simply using Delphi code.

Answer 1

You can change the scrollbar colors using the following code:

WebScrollBox.ElementHandle.style.setProperty('scrollbar-color','Fuchsia Green');

And this can be turned into a nice Delphi procedure as follows:

procedure ChangeScrollbarColor(ScrollBox: TWebCustomPanel; ColorThumb, ColorTrack: TColor);
var
  RGB: Integer;
  ColorThumbHex, ColorTrackHex: String;
begin
  RGB := ColorToRGB(ColorThumb);
  ColorThumbHex := '#' + Byte(RGB).ToHexString +
                  Byte(RGB shr 8).ToHexString +
                  Byte(RGB shr 16).ToHexString;

  RGB := ColorToRGB(ColorTrack);
  ColorTrackHex := '#' + Byte(RGB).ToHexString +
                Byte(RGB shr 8).ToHexString +
                Byte(RGB shr 16).ToHexString;

  ScrollBox.ElementHandle.style.setProperty('scrollbar-color',ColorThumbHex + ' ' + ColorTrackHex);
end;

This procedure can then easily be used to change the colors of a scrollbar in a TWebScrollBox component. The function is very nice, because you can pass in normal Delphi TColor values to it instead of needing to use HTML Colors.

Here's an example:

begin
  ChangeScrollbarColor(MyScrollBox, clFuchsia, clGreen);
end;