Overflow:hidden can't scroll in div

Question

I can't scroll vertical in the div when I set overflow:hidden to it. I don't understand why.

HTML:

<div class="s">
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
 </div>

CSS:

 .s{
        overflow:hidden;
        height:200px;
        border:1px solid red;
    }
    body{
        height:100%;
    }

I make a test JsFiddle to show the error.

JsFiddle

Update:

I need to hide the scrollbar, but i can't scroll if it's hidden.

That's exactly what it's supposed to do. Change to `overflow:auto` instead — manlikeangus, Jun 10 '15 at 09:34
Similar question http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Pawan, Jun 10 '15 at 11:05

score 12 · Accepted Answer · answered Jun 10 '15 at 09:45

If you want to hide the scroll bar but you wish to let it scroll, you can have a container with overflow:hidden; and a child container with overflow-y:scroll, and hide the scroll bar with negative right margin.

See the fiddle

The CSS :

.cont{
    position:relative;
    overflow:hidden;
    height:200px;
    width:100%;
    border:1px solid red;
}
.s{
    overflow-y:scroll;
    height:200px;
    width:100%;
    position:absolute;
    right:-30px;
}

The HTML :

<div class="cont">
    <div class="s">
        <p>Content</p>
    </div>
</div>

score 2 · Answer 2 · answered Jun 10 '15 at 09:33

2

Replace your overflow: hdden with overflow-x: hidden;

answered Jun 10 '15 at 09:33

stanze

2,456
10
13

score 2 · Answer 3 · answered Dec 18 '19 at 09:27

2

Try

.s {
  scrollbar-width: none;
  -ms-overflow-style: none;
   overflow: hidden;
  }

.s::-webkit-scrollbar {
  display: none;
  overflow: hidden;
  }

One for firefox and other for chrome

answered Dec 18 '19 at 09:27

Pran R.V

1,015
12
21

score 1 · Answer 4 · answered Jun 10 '15 at 09:33

1

I don't know if you mean vertical or not, but if you want to be able to scroll horizontally but vertically hidden, change it to:

overflow-y:hidden;

likewise if you want to be the other way around, change to:

overflow-x:hidden;

answered Jun 10 '15 at 09:33

Jamie Barker

8,145
3
29
64

score 1 · Answer 5 · answered Jun 10 '15 at 09:36

You're setting the overflow property of the containing <div class='s'> to hidden. As the name suggests, this will hide any containing content that spills out of the <div> dimensions.

Try setting:

.s{
    overflow-y:scroll;
    height:200px;
    border:1px solid red;
}

JS Fiddle: http://jsfiddle.net/ccrhpbp5/3/

score 0 · Answer 6 · edited Aug 05 '20 at 19:40

0

Another way could be:

put overflow:hidden to container
document.getElementbyId().scroll = true
Then you can do scroll

edited Aug 05 '20 at 19:40

David Buck

3,752
35
31
35

answered Aug 05 '20 at 19:22

Martin

1
1

There's lots of help available in the [help], including [editing help](https://stackoverflow.com/editing-help). Why not start off with the [tour]? – David Buck Aug 05 '20 at 19:39

score 0 · Answer 7 · answered Aug 19 '23 at 14:37

I wrapped my entire content inside the body in a div. And then in the content class in CSS, I gave max-height and hid the scrollbar.

<body>
  <div class="content">
    <!-- My actual content -->
  </div>
</body>

.content {
    max-height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.content::-webkit-scrollbar {
    width: 0;
}

For me, the max-height element was the key attribute.

Overflow:hidden can't scroll in div

7 Answers7