How to style scrollbar

Style Main Scrollbar

You can style the scroll bar of a web page using CSS by targeting the ::-webkit-scrollbar pseudo-element for WebKit-based browsers (such as Google Chrome and Safari) or ::-webkit-scrollbar for Firefox and other browsers that use the Gecko engine.

Here’s an example of how to style the scroll bar. You can use code snippets plugin or copy and paste direct inside child theme style sheet.

/* Style for Chrome and Safari */
::-webkit-scrollbar {
    width: 10px; /* Set width of the scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Set color of the track */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Set color of the thumb */
    border-radius: 5px; /* Round the corners of the thumb */
}

/* Style for Firefox and other browsers */
::-webkit-scrollbar {
    width: 10px; /* Set width of the scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Set color of the track */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Set color of the thumb */
    border-radius: 5px; /* Round the corners of the thumb */
}

You can customize the properties to achieve the desired style for your scroll bar. The width property determines the width of the scrollbar, while the background-color property sets the color of the scrollbar’s track and thumb. The border-radius property can be used to round the corners of the thumb.