JSFiddle - React, Tailwind, and code Playground

by Luis Valle

HTML

<div class="custom-scrollbar-container">
  <div class="custom-scrollbar-content">
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom appearance and be positioned absolutely.</p>
    <p>You can add more content as needed.</p>
    <!-- Your content goes here -->
    <p>This is some text that will be scrollable.</p>
    <p>The scrollbar will have a custom...

CSS

.custom-scrollbar-container {
  height: 200px; /* Set the desired height of the container */
  overflow-y: hidden; /* Hide the default scrollbar */
  position: relative; /* Set the container to be positioned relatively */
}

.custom-scrollbar-content {
  height: 100%; /* Set the height of the content to 100% of the container */
  overflow-y: auto; /* Enable vertical scrolling for the content */
  padding: 20px; /* Add some padding to the content */
}

.custom-scrollbar {
  position: absolute; /* Position the scrollbar absolutely */
  top: 0;
  right: 0;
  width: 12px; /* Set the width of the scrollbar */
  height: 100%; /* Set the height of the scrollbar to 100% of the container */
  background-color: #f1f1f1; /* Set the background color of the scrollbar track */
  border-radius: 6px; /* Add some roundness to the scrollbar */
  overflow-y: scroll; /* Enable vertical scrolling for the scrollbar */
  overflow-x: hidden; /* Hide the horizontal scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent; /* Make the scrollbar track transparent */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
  border-radius: 6px; /* Add some roundness to the scrollbar thumb */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Set the color of the scrollbar thumb on hover */
}