Cannot hide scroll, though overflow is hidden?

Question

<div class="main">
<div class="content">
<div class="left_container">

</div>
</div>
</div>

In the code above, I have added a scroll to the left_container div. But I want to hide it! Referring to other questions and answer, I found out to set overflow:hidden in the parent div class.

But still the scroll is not hidden in the child class?

CSS:

.content
{
    background-color: white;
    width:100%;
    height:auto;
    margin-top:10%;
    position: absolute;
    overflow: hidden;

}

.left_container
{
    background-color:;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:auto;
}

Well I have also tried to set it hidden in the body! still not working..?

if I get you right then you trying to remove the scroll, then removing 'position: absolute' from .content should work — radiant
– radiant, Commented Aug 22, 2015 at 6:21
I did, but the align and background div go missing! And also the scroll is not hidden even then! — Jayant Kudav
– Jayant Kudav, Commented Aug 22, 2015 at 6:22
i still could see background and scroll hidden, here is a fiddle jsfiddle.net/jac607zu — radiant
– radiant, Commented Aug 22, 2015 at 6:23
Just trying to understand why would you do that, .left_container to have scroll and also wants to hide it? if you dont need a scroll on .left_container then have it overflow hidden. — radiant
– radiant, Commented Aug 22, 2015 at 6:37

Mark · Accepted Answer · 2015-08-22 07:35:16Z

0

There is actually a simple way.

.left_container { overflow: hidden }

Now give left_container a child div and apply the following styles

.left_container-child {
  height: 100%;
  overflow-x: scroll;
  width: 101%;
}

What this does is push the scrollbar out of sight.

You really want to check this over on differnet browsers and make sure you get the sweet spot that your content doesnt get cut off.

You can see a working example here (change the width on left_container-child to experiment pushing the scrollbar out). Example

answered Aug 22, 2015 at 7:35

Mark

2,0711 gold badge16 silver badges26 bronze badges

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

4 Comments

Jayant Kudav Over a year ago

Ohkk but in that example you showed, I can see the scroll, its not hidden!?

Mark Over a year ago

Like i said, change the width to push the scrollbar out of sight

Mark Over a year ago

example 2. I have set the width to 200% (just so you can understand). Cheers

Jayant Kudav Over a year ago

Well thats nice! its working! I will have to somehow place it in my code! Ill mark u as answer just give me sometym

K K · Accepted Answer · 2015-08-22 06:16:36Z

0

You have not used overflow:hidden in .left_container. Try:

.left_container {
    background-color:;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:hidden;
}

answered Aug 22, 2015 at 6:16

K K

18.2k4 gold badges33 silver badges39 bronze badges

2 Comments

Jayant Kudav Over a year ago

If I add hidden, I am not able to scroll!

hola Over a year ago

hiding the scrollbars while retaining scrolling ability seems to be full of pretty hacky solutions, here's another stack overflow answer that sheds some light on it: stackoverflow.com/a/25561646/3287366

Saran · Accepted Answer · 2015-08-22 07:18:58Z

0

I think can't hide scroll bar for overflow hidden content. you can try using scroll bar plugin http://nicescroll.areaaperta.com/demo.html

answered Aug 22, 2015 at 7:18

Saran

3882 gold badges4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Cannot hide scroll, though overflow is hidden?

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Related