Thursday, September 5, 2024

How to Style Scrollbars with CSS for a Better-Looking Website

  September 05, 2024   No comments   Edit

Styled Scrollbar Example

This is a paragraph with some content. It will generate a vertical scrollbar if the content exceeds the height of its container.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Try scrolling down to see the styled scrollbar.

Example code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Scrollbar Example</title>
<style>
/* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #b5b5b5;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #6e84ff; /* Change the color to blue */
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Example additional styles */
.content {
  height: 200px;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>

<div class="content">
  <h1>Styled Scrollbar Example</h1>
  <p>This is a paragraph with some content. It will generate a vertical scrollbar if the content exceeds the height of its container.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
  <p>Try scrolling down to see the styled scrollbar.</p>
</div>

</body>
</html>

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)