0
<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..?

Jayant Kudav
  • 15
  • 4
  • if I get you right then you trying to remove the scroll, then removing 'position: absolute' from .content should work – radiant Aug 22 '15 at 06:21
  • I did, but the align and background div go missing! And also the scroll is not hidden even then! – Jayant Kudav Aug 22 '15 at 06:22
  • i still could see background and scroll hidden, here is a fiddle https://jsfiddle.net/jac607zu/ – radiant Aug 22 '15 at 06:23
  • https://jsfiddle.net/0wLsqarL/ you can check my code here – Jayant Kudav Aug 22 '15 at 06:26
  • 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 Aug 22 '15 at 06:37
  • Yes but that solution you gave isnt working either!? – Jayant Kudav Aug 22 '15 at 07:25
  • Right, that's why I asked why would you do that... please refer my prev comment. – radiant Aug 22 '15 at 07:35
  • ohh ohkk! I got what u saying! But thats exactly what I want! I want scrolling on my left_container.. but I do not want user to see the scroll bar! coz its doesn't look good, so i want to make it invisible that's all :) Thats my thought! – Jayant Kudav Aug 22 '15 at 07:54
  • okay, here are some pointers (looks like it was already asked), take a look if you can find a solution. http://stackoverflow.com/questions/23294091/hide-scroll-bar-of-nested-div-but-still-make-it-scrollable http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – radiant Aug 22 '15 at 07:59
  • btw, if I am on your left_container which will have invisible scroll how do I know there are content to be scrolled? I would always want the website to let me know where is action needed rather finding it my own. Having said that you might want custom scroll then check this https://css-tricks.com/custom-scrollbars-in-webkit/ – radiant Aug 22 '15 at 08:04
  • I dont know if I am allowed to share links, http://www.scoopwhoop.com/ See the site it has no scroll bar but its left contents are scrollable and it looks clean without scrollbars! Thats what I want somehow :) – Jayant Kudav Aug 22 '15 at 15:35
  • Finally, you said what you want to achieve. The wesbite you are are referring is making an ajax call to get more data. you do not need to all the jazz you were looking for. https://jsfiddle.net/0wLsqarL/3/ take a look at this fiddle, it's crude but I hope this is what you are tying to achieve. When scroll reached bottom adding data to the left_conatiner and left_conatiner's scroll is not visible as well. – radiant Aug 24 '15 at 14:36

3 Answers3

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;
}
K K
  • 16,034
  • 4
  • 25
  • 37
  • If I add hidden, I am not able to scroll! – Jayant Kudav Aug 22 '15 at 06:20
  • 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: http://stackoverflow.com/a/25561646/3287366 – hola Aug 22 '15 at 06:28
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

Saran
  • 388
  • 4
  • 15
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

Mark
  • 1,721
  • 1
  • 13
  • 23