0

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>
nn3112337
  • 459
  • 6
  • 21
  • Possible duplicate of [CSS customized scroll bar in div](http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) – imtheman Jul 08 '16 at 23:27

3 Answers3

1

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>
Michal
  • 4,952
  • 8
  • 30
  • 63
0
#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

This works look at this, you can scroll, but no scroll bar visible :) all you would have to do is add a div outside of the one you already have.

http://jsfiddle.net/5GCsJ/2125/

jose reyes
  • 1,533
  • 1
  • 13
  • 17
-1
    div { overflow: visible | hidden | scroll | auto | inherit }

I am not sure if you can hide it, AND keep it scroll-able. I think this will work though.

jose reyes
  • 1,533
  • 1
  • 13
  • 17