To hide the horizontal (X-axis) scrollbar in CSS while still allowing the content to be scrollable, you can use the following methods based on the browser:
For Webkit Browsers (e.g., Chrome, Safari):
.hide-x-scrollbar::-webkit-scrollbar {
height: 0; /* Hide horizontal scrollbars */
}
For Firefox:
.hide-x-scrollbar {
scrollbar-width: thin; /* Make the scrollbar thin */
scrollbar-color: transparent transparent; /* Make the scrollbar transparent */
}
For Internet Explorer 10+:
.hide-x-scrollbar {
-ms-overflow-style: scrollbar; /* Default style */
}
.hide-x-scrollbar::-ms-scrollbar {
width: 0; /* Hide horizontal scrollbar */
}
By applying the .hide-x-scrollbar
class to any scrollable element, you can hide the horizontal scrollbar for that element.
For example:
<div class="hide-x-scrollbar">
<!-- Scrollable content here -->
</div>
Note: Hiding scrollbars can affect the user experience, especially if users aren't aware that the content is scrollable. Ensure that the design clearly indicates when there's more content to view.