Final answer:
To hide the scrollbar in CSS but still enable scrolling, use the properties 'overflow: auto;' and '-webkit-scrollbar' for Webkit browsers, or 'scrollbar-width: none;' for Firefox along with '-ms-overflow-style: none;' for IE and Edge.
Step-by-step explanation:
To hide the scrollbar in CSS but still allow scrolling, you can use CSS rules that target the overflow properties of the container. Here is a common approach using overflow property and setting scrollbar width to zero:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge, and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Add the class .example to the HTML element that you want to be scrollable without showing the scrollbar. It's important to note that users may still be able to scroll using touch, keyboard arrows, or a mouse wheel, even when the scrollbar is not visible.