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 — angus, 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 10 · 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,372
9
13

score 1 · Answer 3 · 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

7,965
3
27
62

score 1 · Answer 4 · 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 1 · Answer 5 · answered Dec 18 '19 at 09:27

1

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

855
9
18

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,594
33
29
34

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

Overflow:hidden can't scroll in div

6 Answers6