How can I hide the vertical scrollbar, while still showing my horizontal, and keep scroll functionality on both?

Question

I want to hide my vertical scrollbar, but still be able to scroll both vertically and horizontally.

I have tried using

overflow-y: hidden; overflow-x: scroll;

But it removes the ability to scroll vertically.

I have tried styling the scrollbar with

html .example-container {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none;  /* IE 10+ */
}

and

html .example-container::-webkit-scrollbar { /* WebKit */
  width: 4;
  height: 0;
}

It makes both scrollbars hidden, and it is important for the horizontal scrollbar to be visible.

Example of all three methods tried: https://stackblitz.com/edit/angular-gyq9ub

Answer 1

Create a wrapper div for your inner div and then set inner div overflow = auto. And the outer div overflow to hidden.

For example;

<div class="wrapper-div">
   <div class="example-container">
      <p class="content">
        Start editing to see some magic happen :)
      </p>
      ---
   </div>
</div>

CSS:

.example-container {
     height: 100px;
     overflow: auto;
     max-height: 100%;
     margin-right: -100px;
     padding-right: 100px;
   }
.wrapper-div {
       overflow: hidden;
   }

Thats it! Please check this answer for better understanding.

Answer 2

If you stylize your horizontal scrollbar then your vertical scrollbar somehow disappears and you are still able to scroll vertically as you asked. But it's unclear to me why it works

.example-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.example-container::-webkit-scrollbar-thumb:horizontal {
  background: #a1a1a1;
  border-radius: 3px;
  background-clip: padding-box;
}

/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
  background-color: #dbdbdb;
  border-radius: 3px;
  background-clip: padding-box;
}