nn3112337 nn3112337 - 4 months ago 18
CSS Question

How to hide overflow: scroll scrollbar in centered div

I know there are tons of duplicates of this question, but none of these worked so far.

I have a div with unknown width which uses overflow-y: scroll, but I want to hide the scrollbar and keep it still scrollable. Its centered in the middle of the screen, how do I do that?



.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}

<div class="content-middle">
<p>My content is here</p>
</div>




Answer

Basically what you want to do is put the scrollable element inside another element and position it absolute to the right. (with negative value)

Then just focus on the content of the scrollable element.

body {
  overflow: hidden;
}

.content-middle {
  margin: 0 auto;
  text-align: center;
  max-height: 81vh;
  overflow-y: scroll;
  position: absolute;
  width: 100%;
  right: -17px;
}
<div class="content-middle">
  <p>My content is here</p>
</div>

Comments