2

I'm trying to write HTML/CSS in a way that I have a div which can be scrolled both vertically and horizontally, but ONLY the horizontal scrollbar is visible. So the vertical scrolling is done using mouse wheel and horizontal using the scrollbar at the bottom (and other, usual controles like keyboard etc.). The usually suggested solution with -webkit-scrollbar display none doesn't apply here because it can only hide both scrollbars, hence the new question.

So, basically, I need behaviour like this, except the horizontal scrollbar should still be there:

.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>
Zlatan Sičanica
  • 315
  • 2
  • 11
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Apr 14 '20 at 14:44
  • Sorry, didn't see the need of adding code since the question is pretty straight-forward (even got the answer before I added code). I added the minimal example of my approach before asking the question, hope that is enough. – Zlatan Sičanica Apr 14 '20 at 15:20

1 Answers1

4

You can use -webkit-scrollbar, but you need to use width and height instead of display: none

div {
  width: 100px;
  height: 100px;
  font-size: 48px;
  
  overflow: auto;
}

::-webkit-scrollbar {
  height: 0px;
  width: 8px;
  border: 1px solid #fff;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}
<div>
Lorem ipsum dolor sit amet.
</div>

Shift scroll to move horizontally

width will just affect the vertical scroll while height will just affect the horizontal scroll. If you set height: 0px it will hide the horizontal scroll bar, but keep the vertical one.

Jack
  • 1,893
  • 1
  • 11
  • 28
  • And what about IE or Firefox? How to do this in those browsers? – Bary Oct 22 '21 at 18:20
  • @desert, Offhand I don't know. Take a look at [this](https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/54101063#54101063). You're probably going to have to have a wrapper with a scroll bar set to `none`. IE has an EOL for June next year. I'm sure you could come up with something to make it work, but it's probably more hassle than it's worth for most scenarios. – Jack Oct 23 '21 at 01:43
  • 1
    I made two dives, one in another. I added overflow-y: scroll and scrollbar-width: none to parent and overflow-x: auto to child. Probably it is not the best way to do this but it works. – Bary Oct 24 '21 at 09:07