CSS - Hide scroll bar in div without fixed width

Question

I have read a lot of answers and tried a lot of code about how to hide a scrollbar in a div, but the answers are almost always for divs with a fixed size, for which the solution is to just hide the scroll bar in a wrapper div, and then in the working div to just move (hide) the scroll bar off screen. But for this to work you have to know the size of the div, and all my divs are calculated using width:%.

Can someone give me an idea how to hide the scroll bar in the div showing with css, seeing that I am using Angular2 framework and do not want to include javascript/jquery in it.

HTML:

<div id="boks3">
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>

</div>

<div id="stack1">
 <div id="boks1">
 </div>
 <div id="boks5">
 </div>
</div>

<div id="stack2">
  <div id="boks2">
  </div>
  <div id="boks4">
  </div>
</div>

CSS:

#stack1 {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #000000;
}
#boks3,
#boks1,
#boks2,
#boks4,
#boks5 {
  background-color: #ff3333;
  width: 32%;
  position: absolute;
  margin-left: 33.5%;
  padding: 0px 0px 0px 5px;
  z-index: 3;
  height: 100px;
  text-align: left;
  overflow: auto;
}
#boks1 {
  background-color: #ff6666;
  margin-left: 2%;
  z-index: 1;
  height: 100px;
}
#boks2 {
  background-color: #ff4d4d;
  margin-left: 17%;
  z-index: 2;
  height: 100px;
}
#boks5 {
  background-color: #ff0000;
  margin-left: 65%;
  z-index: 1;
  text-align: right;
  height: 100px;
}
#boks4 {
  background-color: #ff1a1a;
  margin-left: 50%;
  z-index: 2;
  text-align: right;
  height: 100px;
}
#stack1:hover #boks1,
#stack1:hover #boks5 {
  background-color: yellow;
  z-index: 4;
}
#stack2:hover #boks2,
#stack2:hover #boks4 {
  background-color: green;
  z-index: 4;
}

Also the position: absolute; makes it different from the other similar questions that have been asked I feel. At the moment I can hide the scroll bar, but when I resize the browser window you can see parts of it sticking out.

So you want to hide the scroll bar, but still be able to scroll? — mhatch, Jan 30 '17 at 15:51
It takes away the scroll bar, but also to ability to scroll. So I did put it in a wrapper div and tried to space the scroll bar out of the window, but when I make the window larger (like on a larger screen), you can see half of the scroll bar again... — Alfa Bravo, Jan 30 '17 at 15:52
http://stackoverflow.com/questions/23294091/hide-scroll-bar-of-nested-div-but-still-make-it-scrollable This is basically what I tried, but it does not work well with "position:absolute" and also with something like "width:32%" — Alfa Bravo, Jan 30 '17 at 15:54

Fan Jin · Accepted Answer · 2017-02-12T05:48:56.660

You can add a div wrap around you current div and make the wrapper div overflow: hidden. Change the inner div's with to `calc(100% + 20px).

For example:

private hideScrollbar(): void {
  this.parentNode = this.el.nativeElement.parentNode;
  this.wrapper = document.createElement('div');
  this.wrapper.style.width = this.el.nativeElement.offsetWidth + 'px';
  this.wrapper.style.height = this.el.nativeElement.offsetHeight + 'px';
  this.wrapper.style.overflow = 'hidden';
  this.el.nativeElement.style.width = 'calc(100% + 20px)';
  this.el.nativeElement.style.height = 'calc(100% + 20px)';
  // set the wrapper as child (instead of the element)
  this.parentNode.replaceChild(this.wrapper, this.el.nativeElement);
  // set element as child of wrapper
  this.wrapper.appendChild(this.el.nativeElement);
}

Scroll

You can find more details of the above code in Angular2-drag-scroll

Thanks, I made a small test app to try this and it seemed to work! — Alfa Bravo, Feb 11 '17 at 08:04

Callum · Answer 2 · 2017-01-30T17:43:27.900

0

To hide the scroll bar you can use WebKit. All popular browsers but Firefox support this, you would need to use jQuery to do this in Firefox.

Simply add the following class to your CSS:

#boks3::-webkit-scrollbar { 
    display: none; 
}

This will hide the scrollbar, but still allow scrolling here is an example CodePen.

edited Jan 30 '17 at 17:43

answered Jan 30 '17 at 17:35

Callum

845
11
22

Hi, thanks for the help, but in the example you gave you can still see the scroll-bar... – Alfa Bravo Jan 30 '17 at 17:43
Are you using Firefox? If so it won't work Firefox can only do this with jQuery. – Callum Jan 30 '17 at 17:44
Ah ok, yes I am using firefox, so no luck there. – Alfa Bravo Jan 30 '17 at 18:18

score 0 · Answer 3 · answered Jan 30 '17 at 18:00

For Chrome, Use

#boks3::-webkit-scrollbar { 
    display: none; 
}

For Mozilla Use :

html {
   overflow: -moz-scrollbars-none;
}

Checkout Full Snippest Here. This Might Be Helpful :

    #stack1 {
      position: absolute;
      width: 100%;
      height: 100px;
      background-color: #000000;
    }
    #boks3,
    #boks1,
    #boks2,
    #boks4,
    #boks5 {
      background-color: #ff3333;
      width: 32%;
      position: absolute;
      margin-left: 33.5%;
      padding: 0px 0px 0px 5px;
      z-index: 3;
      height: 100px;
      text-align: left;
      overflow: auto;
    }
    #boks1 {
      background-color: #ff6666;
      margin-left: 2%;
      z-index: 1;
      height: 100px;
    }
    #boks2 {
      background-color: #ff4d4d;
      margin-left: 17%;
      z-index: 2;
      height: 100px;
    }
    #boks5 {
      background-color: #ff0000;
      margin-left: 65%;
      z-index: 1;
      text-align: right;
      height: 100px;
    }
    #boks4 {
      background-color: #ff1a1a;
      margin-left: 50%;
      z-index: 2;
      text-align: right;
      height: 100px;
    }
    #stack1:hover #boks1,
    #stack1:hover #boks5 {
      background-color: yellow;
      z-index: 4;
    }
    
    #stack2:hover #boks2,
    #stack2:hover #boks4 {
      background-color: green;
      z-index: 4;
    }
    /* Add This Into CSS Code */
    #boks3::-webkit-scrollbar { 
        display: none; 
    }
    #boks3{
        -ms-overflow-style: none;  // IE 10+
        overflow: -moz-scrollbars-none;
    }
    html {
       overflow: -moz-scrollbars-none;
    }

<div id="boks3">
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
        * <br>
    
    </div>
    
    <div id="stack1">
     <div id="boks1">
     </div>
     <div id="boks5">
     </div>
    </div>
    
    <div id="stack2">
      <div id="boks2">
      </div>
      <div id="boks4">
      </div>
    </div>

Thanks for the reply, but in the code snippet I still see the side bar due to the fact that I am running firefox it seems... — Alfa Bravo, Jan 30 '17 at 18:18

score 0 · Answer 4 · answered Jan 30 '17 at 19:12

0

Maybe this info help you https://coderwall.com/p/4wa6ba/hide-browser-scroll-bars , try

answered Jan 30 '17 at 19:12

grinmax

1,835
1
10
13

CSS - Hide scroll bar in div without fixed width

4 Answers4