I'm attempting to create a layout with HTML/CSS where there is a div that can be scrolled vertically and horizontally, but I only want the horizontal scrollbar to be visible. The vertical scrolling should be done using the mouse wheel while the horizontal scrolling should be controlled by the scrollbar at the bottom (and other typical controls like keyboard inputs). The commonly suggested solution of using `-webkit-scrollbar { display: none; }` won't work in this case because it hides both scrollbars, leading to my new dilemma.
Essentially, what I require is a setup similar to this one, but with the horizontal scrollbar still visible:
.content {
width:400px;
height:200px;
}
.container {
overflow-x: auto;
overflow-y: auto;
height: 100px;
width: 200px;
}
.container::-webkit-scrollbar {
display: none;
}<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>