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
– manlikeangus, Commented Jun 10, 2015 at 9:34

Billy · Accepted Answer · 2015-06-10 09:45:07Z

13

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>

answered Jun 10, 2015 at 9:45

Billy

1,0439 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pran R.V · Accepted Answer · 2019-12-18 09:27:52Z

3

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, 2019 at 9:27

Pran R.V

1,15612 silver badges23 bronze badges

Comments

stanze · Accepted Answer · 2015-06-10 09:33:59Z

2

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

answered Jun 10, 2015 at 9:33

stanze

2,47814 silver badges14 bronze badges

Comments

Jamie Barker · Accepted Answer · 2015-06-10 09:33:29Z

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, 2015 at 9:33

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

Comments

LeDoc · Accepted Answer · 2015-06-10 09:36:37Z

1

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/

answered Jun 10, 2015 at 9:36

LeDoc

9352 gold badges13 silver badges25 bronze badges

Comments

David Buck · Accepted Answer · 2020-08-05 19:40:18Z

0

Another way could be:

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

edited Aug 5, 2020 at 19:40

David Buck

3,88840 gold badges54 silver badges74 bronze badges

answered Aug 5, 2020 at 19:22

Martin

11 bronze badge

1 Comment

David Buck Over a year ago

There's lots of help available in the help center, including editing help. Why not start off with the tour?

ssindher11 · Accepted Answer · 2023-08-19 14:37:28Z

0

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.

answered Aug 19, 2023 at 14:37

ssindher11

2723 silver badges8 bronze badges

Collectives™ on Stack Overflow

Overflow:hidden can't scroll in div

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related