4

What I am trying to do is to hide the scrollbar of a DIV. In order to do that, I created an outer DIV with overflow-y: hidden; and placed a slightly wider DIV inside it. I gave the outer DIV higher z-index than the inner one. Both have position: fixed;, but no matter what, it doesn't work – the wider DIV is still visible outside its parent DIV. I also made it so that z-index of html would be higher than that of the inner DIV, in hopes it would hide the scrollbar, but that didn't work either. Neither did using negative z-index work. I've searched for days for a fix to this but none worked.

Here is the basic example code(should I include the entire code in jsfiddle?) - HTML:

<html>
    <body bgcolor="#BFBFBF">
       <div class="outer_MB">
          <div class="in_MB">
          </div>
       </div>
    </body>
</html>

CSS:

html {
    z-index: 2;
}

.outer_MB {
    position: fixed;
    height: 70%;
    width: 84%;
    left: 8%;
    bottom: 0;
    border-left: 1px solid black;
    border-right: 1px solid black;
    overflow-y: hidden;
    z-index: 2;
    text-align: center;
}

.in_MB {
    height: 70%;
    width: 86%;
    position: fixed;
    overflow-y: scroll;
    z-index: 1;
}

PM: This is the first question I asked on this website, so tell me if I'm missing something and I'll try to fix it.

The Light Sabrix
  • 127
  • 9

2 Answers2

3

The problem is that your .in_MB element is tied to the outer_MB element. No matter what your inner element's z-index is set to, it will always display on top of the outer element.

Imagine having two boxes. A large box and a small box. You place the small box inside the large box. You then lift the large box up - the small box doesn't stay where it is, it lifts with the large box.

If you want .in_MB to appear behind .outer_MB, you'll need to make them separate elements:

<div class="outer_MB"></div>
<div class="in_MB"></div>

You'll then need to style the .in_MB element to appear in the same position as the .outer_MB element. As these elements are now separate but share the same overall ancestor, the z-index will kick into action accordingly.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
1

So the gist of you problem is you need a div which allows scrolling but the scrollbar should not be visible...

See this fiddle.

Here is the snippet.

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#content {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 15px;
}
html,
body {
  height: 99%;
  overflow: hidden;
}
<div id="container">
  <div id="content">
    testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />
  </div>
</div>

Hope it helps..

Shrinivas Shukla
  • 4,325
  • 2
  • 21
  • 33
  • The problem with this approach is that different browsers have different sized scrollbars. In Chrome on Windows I can see a feint line where the scrollbar is still partly visible, because in the browser I'm using the scrollbar is 17px wide - larger than the 15px you've defined. Furthermore some browsers will have a much thinner scrollbar or worse, scrollbars which appear on top of content (tablets, etc.), so this solution may cause more problems than it solves. – James Donnelly Jul 09 '15 at 11:14
  • 1
    Thanks @JamesDonnelly!! I can see the problem now. I tested on 3 browsers and firefox shows a thin scrollbar moving.. Thanks for pointing it out. :) – Shrinivas Shukla Jul 09 '15 at 11:20
  • I figured that already. The thing is, my DIV is only about ~84% wide. I used a similar way, but the inner DIV was still visible inside the body. That method is to hide the scrollbar of the entire page, not a small DIV. Or that's how I see it, at least. It is possible to make my inner DIV wider and have an enormous amount of padding, but that would be a little too hacky. – The Light Sabrix Jul 09 '15 at 15:03