+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Custom Scrollbar Styles (Webkit and Firefox) (/showthread.php?tid=5196)
CSS Custom Scrollbar Styles (Webkit and Firefox) - Qomplainerz - 07-26-2023
Description:
You can customize scrollbar styles for WebKit-based browsers and Firefox using vendor-specific pseudo-elements and properties.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Custom Scrollbar Styles Example</title>
<style>
/* WebKit (Chrome, Safari) Scrollbar Styles */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* Firefox Scrollbar Styles */
/* Note: The scrollbar styles for Firefox require Gecko engine version 64 or higher */
scrollbar-width: thin; /* auto or thin */
scrollbar-color: #f1f1f1 #888; /* track color, thumb color */
</style>
</head>
<body>
<div style="height: 300px; overflow-y: auto;">
<!-- Add long content to enable scrollbar -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</body>
</html>
Explanation:
In this example, we customize scrollbar styles for both WebKit-based browsers (using ::-webkit-scrollbar pseudo-elements) and Firefox (using non-standard CSS properties scrollbar-width and scrollbar-color). The ::-webkit-scrollbar styles for WebKit browsers are similar to the earlier scrollbar styling example, while the scrollbar-width and scrollbar-color properties for Firefox allow you to set the width and colors of the scrollbar.