Preview:
/* Hide scrollbar indicator */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

/* Optional: add a border around the scrollable content to indicate where scrolling is possible */
.scrollable-content {
  border: 1px solid #ccc;
}
Note that this method only works for WebKit browsers and does not affect other browsers. Therefore, it's recommended to use the overflow-y-auto class (or another appropriate Tailwind CSS utility class) to ensure consistent styling and behavior across all browsers.

Here's an example of how to use the overflow-y-auto class on an element:

html
Copy code
<div class="overflow-y-auto">
  <!-- content here -->
</div>
The overflow-y-auto class allows scrolling in the y-axis when the content overflows the container, and displays the scrollbar indicator only when necessary.





downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter