/* 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.
Preview:
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