CSS Custom Scrollbar Styling (Code Snippet)

<div class="custom-scroll-content">
  <p>This content is scrollable. Notice the custom scrollbar style applied to this specific div.</p>
  <p>Scroll down to see more content...</p>
  <div style="height:500px;"></div>
  <p>End of content.</p>
</div>

body {
  font-family: Arial, sans-serif;
}
.custom-scroll-content {
  height: 200px;
  width: 350px;
  overflow-y: scroll;
  border: 1px solid black;
  padding: 10px;
  background-color: #f0f0f0;
}

/* For Webkit browsers (Chrome, Safari, new Edge) */
.custom-scroll-content::-webkit-scrollbar {
  width: 12px;
}

.custom-scroll-content::-webkit-scrollbar-track {
  background: #e0e0e0; 
  border-radius: 10px;
}
 
.custom-scroll-content::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
}

.custom-scroll-content::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* For Firefox */
.custom-scroll-content {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #888 #e0e0e0; /* thumb and track color */
}

CSS Custom Scrollbar Styling

Share Code Snippet