Hide scrollbar on div with position: fixed property

Question

I can't seem to figure out, how I could hide the scrollbar on an element which has the position: fixed property set. I need a fixed side-menu with a fixed height in my app and the rest of the content should be scrollable. I already tried to wrap it in another div and set the overflow property of the parent to hidden, but it doesn't seem to work for fixed elements. Any suggestions will be greatly appreciated. Here is the snipet:

<!DOCTYPE html>
<html>
<head>
<title>Blabla</title>
</head>
<body>
<style>
.blabla {
position: fixed;
    height: 150px;
    width: 200px;
    background: red;
    /*overflow-y: hidden;*/
}
.blabla2 {

font-size: 20px;
    text-align: center;
    height: 149px;
    overflow-y: scroll;
}
</style>
<div class="blabla">
  <div class="blabla2">
   blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
   blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
  </div>
</div>
</body>
</html>

man your code snipper does exactly what you want run it and see — Georgi Antonov, Mar 27 '18 at 14:11
you want the scrollbar to be visible only on HOVER ? or you want to never be able to scroll down — Georgi Antonov, Mar 27 '18 at 14:14

score 1 · Accepted Answer · answered Mar 27 '18 at 14:19

1

.blabla2::-webkit-scrollbar {
width: 0px;
background: transparent;
}

Source: Hide scroll bar, but while still being able to scroll

answered Mar 27 '18 at 14:19

user3738936

936
8
22

would this work on Firefox, IE, Edge, Opera, Safari? – N. Ivanov Mar 27 '18 at 14:30
I believe it would work for Firefox, IE and the others might need to be done with js/css. google '::-webkit-scrollbar for [your browser]' – user3738936 Mar 27 '18 at 16:27

score 0 · Answer 2 · answered Mar 27 '18 at 14:10

I am not sure I understand your question correctly, but simply add overflow:hidden; if you do not wish for the fixed field to be scrollable.

Here is a working example

.blabla {
  position: fixed;
  height: 150px;
  width: 200px;
  background: red;
  /*overflow-y: hidden;*/
}

.blabla2 {
  font-size: 20px;
  text-align: center;
  height: 149px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Blabla</title>
</head>
<div class="blabla">
  <div class="blabla2">
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br> blabla
    <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br> blabla
    <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br> blabla
    <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br> blabla
    <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
  </div>
</div>
</body>

</html>

then have a look at [this](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) question. hope it helps — N. Ivanov, Mar 27 '18 at 14:14
Yes, I found a working solution there. I accepted my question to be market as a duplicate. — Maximilian Both, Mar 27 '18 at 14:29

Hide scrollbar on div with position: fixed property

2 Answers2