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
– mhatch, Commented Jan 30, 2017 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
– Alfa Bravo, Commented Jan 30, 2017 at 15:52
stackoverflow.com/questions/23294091/… This is basically what I tried, but it does not work well with "position:absolute" and also with something like "width:32%" — Alfa Bravo
– Alfa Bravo, Commented Jan 30, 2017 at 15:54

Fan Jin · Accepted Answer · 2017-02-12 05:48:56Z

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!

Callum · Accepted Answer · 2017-01-30 17:43:27Z

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, 2017 at 17:43

answered Jan 30, 2017 at 17:35

Callum

85511 silver badges22 bronze badges

3 Comments

Alfa Bravo Over a year ago

Hi, thanks for the help, but in the example you gave you can still see the scroll-bar...

Callum Over a year ago

Are you using Firefox? If so it won't work Firefox can only do this with jQuery.

Alfa Bravo Over a year ago

Ah ok, yes I am using firefox, so no luck there.

Sachin Sanchaniya · Accepted Answer · 2017-01-30 18:00:12Z

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

grinmax · Accepted Answer · 2017-01-30 19:12:29Z

0

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

answered Jan 30, 2017 at 19:12

grinmax

1,8551 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS - Hide scroll bar in div without fixed width

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Linked

Related