Scrollbar Styling

Business Background

Use a Scrollbar feature on multiple web elements to enable web visitors and end users to scroll through online content conveniently.

How to Video

Video Coming Soon!

How to Guide

You can add and style scrollbars in multiple elements within Titan, such as Repeat Auto Fit, Scroll, Stepper containers, and more!

Scrollbar Styling Options
#OptionFunctionAvailable in Project or Element
1Horizontal Scroll SizeThis option enables you to set the size of the horizontal scrollbar in pixels.
2Vertical Scroll SizeUse the Vertical Scroll Size option to set the size of the vertical scrollbar in pixels.
3Track ColorChoose a color for the background of your scrollbar with the Track Color setting.

The color can be set by selecting from a color pallet or by providing a HEX color code.
5Thumb ColorThe Thumb Color setting can be used to change the color of the thumb/scrollbox in the scrollbar.

The color can be set by selecting from a color pallet or by providing a HEX color code.

Real-Life Example of How to Style a Scrollbar

Join us as we look at one of the many ways you can style a scrollbar. Alternatively, contact us today if you have a specific business use case in mind.

Styling a Scrollbar for a Power Table

The example below shows a power table that will require a scrollbar to view all the content.

Take note of the settings configured in the Power Table Styling screen for the size of the scrollbar/s as well as the track and thumb colors.

Simply update the Track or Thumb Color settings by clicking on the color selector icon. you can also set solid or gradient colors for your scrollbar.

Scrollbar example
Scrollbar example

Hidden Title

Need more help?