I'm working on a web project where I need to customize the appearance and behavior of a container element. Specifically, I want to remove the scroll bars from the container and prevent users from selecting text within it. I've tried various CSS properties and techniques, but I haven't found a solution that works reliably across different browsers.
Here's what I've attempted so far:
<div class="custom-container">
<!-- Content goes here -->
</div>
CSS:
.custom-container {
width: 300px;
height: 200px;
overflow: hidden; /* Hides scroll bars, but still allows scrolling */
user-select: none; /* Prevents text selection, but doesn't work consistently */
}
While setting overflow: hidden successfully hides the scroll bars, it still allows users to scroll the content using mouse or touch gestures. Additionally, the user-select: none property prevents text selection, but it's not supported uniformly across all browsers.
Could someone suggest a reliable CSS-based solution to achieve both hiding scroll bars and preventing text selection within the container element? Any insights or alternative approaches would be greatly appreciated!