CSS Scrollbar

In CSS, you can customize the appearance of scrollbars on a web page to match your design and enhance the user experience. The scrollbar properties are non-standard CSS properties that are implemented by some browsers. As of my last update in September 2021, the scrollbar properties were only supported in certain versions of Firefox, Edge, and Internet Explorer (with the -ms- prefix). Chrome, Safari, and most other browsers did not support these properties.

The scrollbar properties include:

1. ::-webkit-scrollbar: Targets the scrollbar elements in WebKit-based browsers (e.g., Chrome, Safari).
2. ::-webkit-scrollbar-thumb: Targets the thumb (the draggable part) of the scrollbar.
3. ::-webkit-scrollbar-track: Targets the track (the non-draggable part) of the scrollbar.
4. ::-webkit-scrollbar-button: Targets the scrollbar buttons, if they are visible.
5. ::-webkit-scrollbar-track-piece: Targets the track piece between the thumb and the buttons.
6. ::-webkit-scrollbar-corner: Targets the corner where horizontal and vertical scrollbars meet.
7. ::-ms-scrollbar: Targets the scrollbar elements in Internet Explorer.

Please note that the appearance of scrollbars may vary based on the user’s operating system and browser version.

Here’s an example of how to customize the scrollbar in WebKit-based browsers:

/* For WebKit-based browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0056b3;
}

::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}

/* To target Internet Explorer */
/* Note: The -ms- prefix is used for Internet Explorer */
::-ms-scrollbar {
  width: 12px;
}

::-ms-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 6px;
}

::-ms-scrollbar-thumb:hover {
  background-color: #0056b3;
}

::-ms-scrollbar-track {
  background-color: #f2f2f2;
}

In this example, we are targeting WebKit-based browsers (e.g., Chrome, Safari) and Internet Explorer to customize the appearance of the scrollbar. We change the scrollbar’s width, thumb color, track color, and add a hover effect on the thumb.

Keep in mind that the use of these scrollbar properties may change or become more widely supported in the future. Always test your design in different browsers to ensure compatibility and fallback gracefully if these properties are not supported.