CODEWITHSUNDEEP
htmlcss
Zlatan Sičanica
Zlatan Sičanica

Reputation: 355

Hide vertical scrollbar, keep horizontal and still able to scroll

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>

Upvotes: 5

Views: 7344

Answers (1)

Jack
Jack

Reputation: 1999

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.

Upvotes: 6

Related Questions