Alt text not available
Coding

Custom Scrollbar / scrollbar CSS / How To Style Scrollbars with CSS

Learn how to create a custom scrollbar with CSS. Custom ScrollbarsCustom Scrollbar Example. Note: The -webkit-scrollbar is not supported in Firefox or in Edge etc….

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Document</title>
<style>
/* Width and height of the scrollbar track */
::-webkit-scrollbar {
width: 6px;
height: 100%;
max-height: 158px;
padding-right: 6px;
}

/* Styling for the scrollbar track */
::-webkit-scrollbar-track {
/* background-color: #f1f1f1; */
border-radius: 100px;
}

/* Styling for the scrollbar thumb */
::-webkit-scrollbar-thumb {
background-color: #E6E6E6;
border-radius: 100px;
}

/* Hover styling for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
</style>
</head>
<body></body>
</html>

Alt text not available

"As a seasoned blogger, I bring expertise in HTML5, CSS3, JavaScript, SCSS, jQuery, PHP, MySQL, React, and Next.js to my articles. Continuously expanding my skill set, I'm passionate about exploring new technologies. Eager to engage with fellow software engineers, I invite connections from the community. Let's collaborate and innovate together!"

    Order by :

    Leave a Reply

    Your email address will not be published. Required fields are marked *