Hide vertical scrollbar on browsers but making it still working

Question

I have to hide the vertical scrollbar of an element but I have to make the "scrolling" keep working, for example using the mouse wheel.

I Followed this post:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

With that code, I was able to hide both scrollbars, but I'm not able to keep the horizontal one visible. Does anyone know how to do it.?

score 1 · Accepted Answer · answered Sep 27 '21 at 05:48

Do you want to show horizontal scrollbar and hide vertical scrollbar but making both working? If so, you can refer to the code below:

.content {
  width: 400px;
  height: 200px;
}

.container {
  overflow-x: auto;
  overflow-y: auto;
  height: 100px;
  width: 200px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

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

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

 ::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

<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>

This code works in webkit browsers. But for FireFox and IE, it seems that we can only hide or show both scrollbars as they can't customize the scrollbar-track and scrollbar-thumb.

Hide vertical scrollbar on browsers but making it still working

1 Answers1