Browsers scrollbar is under my fixed div

Question

i have a fixed header with 100% width.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

browsers scrollbar is under my fixed div. How to fix that?

scrollbar

can you provide the live link? – NullPoiиteя Oct 23 '12 at 10:41 — NullPoiиteя, Oct 23 '12 at 10:41

NullPoiиteя · Accepted Answer · 2012-10-23T11:39:39.510

52

its because the overflow-x: hidden; in base.css line number 9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

edited Oct 23 '12 at 11:39

answered Oct 23 '12 at 10:39

NullPoiиteя

56,591
22
125
143

3

if i set z-index: -1, than problem is solved. but maybe there is another way? – Grufas Oct 23 '12 at 11:03
3

Thanks a lot, it helped! also had to remove overflow: auto; from body. Thank you for your time! – Grufas Oct 23 '12 at 11:38
21

I don't understand what the solution to this problem was? Seems the OP who started this thread never said what his solution was. I see that z-index:-1 fixed it, however that's not a solution I can use. Was there another way to fix this problem? – TCD Factory Aug 05 '14 at 18:21
7

Same problem, CANNOT remove overflow ... solution? We should be able to set the scrollbar z-index to infinite or something – Caio Vianna Lima Netto Oct 23 '14 at 11:18

score 17 · Answer 2 · answered Jun 28 '18 at 11:24

The issue isn't with overflow-x on the body tag. It's because of overflow-x andoverflow-y on the html tag. Once I removed this from the HTML tag, I could put whatever overflow I wanted on my body.

This happens when:

overflow-x is set to either auto, hidden, overflow, or scroll
overflow-y is set to either auto, hidden, -webkit-paged-x, or -webkit-paged-y

It doesn't have to be an explicit call to overflow-x or overflow-y, as overflow sets both of them.

I'm on Chrome 67 using Windows 10.

score 14 · Answer 3 · answered Feb 28 '16 at 14:31

This can be solved by adding overflow of body

from

overflow:auto;

to

overflow:auto;
overflow:initial;

This is your issue

If your scroll is set on body, if its structured as body > wrapper > header (with fixed position), content so on

below is your solution

solution for issue

note: this will work only on body but not on div container with scroll. you can also work with z-index to get it to work, but you will be specifying z-index to stack other elements in order to get it right.

Hope this helps..:)

You can not add same property with different value twice. The first one will be overridden with the second one and it doesn't solve the problem either for me. — Sajidur Rahman, Dec 23 '16 at 05:08

Kirill Simonov · Answer 4 · 2021-09-18T20:09:43.957

4

clip-path property can help you.

You need to put your header inside the scrollable content though, but it doesn't matter since it has a fixed position. Then, if you apply clip-path: inset(0 0 0 0); to the container it will clip out everything outside this rectangle.

function toggle() {
  content.classList.toggle('clip');
}

#container {
  overflow-y: auto;
  width: 300px;
  height: 100px;
  padding: 0;
}
#fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 350px;
  height: 50px;
  background: blue;
}
#content {
  height: 1000px;
  width: 100%;
  background: yellow;
}
#content.clip {
  clip-path: inset(0 0 0 0);
}

<div id="container">
  <div id="content">
    <div id="fixed"></div>
  </div>
</div>
<button onclick="toggle()">toggle clip-path</button>

edited Sep 18 '21 at 20:09

answered May 15 '21 at 03:39

Kirill Simonov

8,257
3
18
42

It does not work with a custom scroll – Max Dec 01 '22 at 14:50
1

Thank you kindly for this arcane dark magic `clip-path` invocation. I thought I was out of luck when all the other suggestions didn't work. This was exactly what I was missing :) – Sámal Rasmussen Jul 05 '23 at 10:09

score 2 · Answer 5 · 2017-02-01T12:49:22.190

A css hack (i finally found a way) for this with not much explanation made quickly - the first floated element is. I think to understand the principle how it works from the code below.

Update: And there is an issue for mobile browsers see below to assess whether or not youre ok with it.

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

And final code, nearly the same with things you want see visible and working

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

What's important it works with mobile and desktop browsers. Actually for the moment i tested mobile on windows edge when my computer changed into tablet mode and then desktop one. The code works then all the time. To check is whether or not this works with :before instead of div id="aaaa" to make it more css pure and additional divs intependent.

Update: it doesn't work well with before for Edge browser doesn't change the scrollbar when entering the tablet mode.

If you encounter problems with hidden contents in bbbb element try not to position: absolute/fixed elements in the bbbb container.

I haven't tested it yet for all situations and browsers.

Update: the issue mentioned somewhere on the top of this answer - yet on mobile browsers scrollbar is covered because the scrollbar is dynamic - it appears only when your scrolling and you know it is not part of any containers. The scrollbar probably is pretty thin on all browsers, so you should decide what to do with it. Maybe a little 5 pixels margin or so?

score 2 · Answer 6 · answered Sep 12 '18 at 14:06

2

Had same problem in react app.

Moved overflow-y: scroll style from #root to body selector. It solved issue for me.

answered Sep 12 '18 at 14:06

Nikita

970
9
12

score 2 · Answer 7 · answered Apr 05 '20 at 22:17

2

Set a z-index on the container that is the parent for your header and your content.

answered Apr 05 '20 at 22:17

holmberd

2,393
26
30

I have tried this and it does not work, although i put it behind everything is still not clickable – Kailegh Jun 23 '20 at 07:51
@Kailegh clickable? I have no idea what you are talking about. – holmberd Jun 23 '20 at 16:01
that with your solution my scroll bar cannot be clicked or dragged down – Kailegh Jun 23 '20 at 16:14
@Kailegh without code it's impossible to tell why you are having that issue. I recommend you create a new questions for your issue with example code. – holmberd Jun 23 '20 at 20:29

score 2 · Answer 8 · answered Aug 01 '20 at 10:31

2

remove height:100% in html tag

answered Aug 01 '20 at 10:31

Guilherme Nunes

41
3

score 2 · Answer 9 · edited Jan 06 '21 at 03:41

2

The way I solved this problem was setting a scroll bar's width and then setting a 100% width to the navbar minus the scroll bar's width.

Like this:

.main-container::-webkit-scrollbar {
  width: 8px;
}

.navbar{
    display: flex;
    position: fixed;
    width: calc(100% - 8px);
    height: 8rem;
    z-index: 5000;
}

This is how it looks like

This is how the scrollbar looks like

edited Jan 06 '21 at 03:41

Kols

3,641
2
34
42

answered Jan 06 '21 at 03:00

Newbie

49
1
4

score 1 · Answer 10 · answered Jun 21 '17 at 09:56

1

I had this issue, my scrollbar was under my fixed header and I solved this after I removed from my html tag height: 100%; and I added other proprieties to be sure I have the same result. None of the other solutions helped me. I hope this helps someone.

answered Jun 21 '17 at 09:56

Madalina Taina

1,968
20
26

score 1 · Answer 11 · answered Jan 15 '23 at 10:59

1

I had a similar issue on an angular app,

Irrespective of the overflow attribute I had in other container elements in the hierarchy, Moved overflow: hidden style from html selector to body selector. It solved issue for me.

answered Jan 15 '23 at 10:59

Sasi Kumar M

2,440
1
23
23

Mohamed · Answer 12 · 2023-03-31T04:40:54.700

I had this problem and what caused it for me was I had overflow-x: hidden inside my html selector and body selector. So I removed it from the html selector and into the body selector alone.

so:

html, body {
  height: 100%; /* <-- was not an issue and remained */
  overflow-x: hidden; /* <-- remove this from html selector */
}
/* to */

body {
  overflow-x: hidden; /* moved it here so then it worked for me */
}

score 0 · Answer 13 · edited Aug 02 '19 at 07:41

0

This can be solved using 2 ways as below:

1.First caculate the scrollbarWidth=el.offsetWidth - el.clientWidth

2.Set fixed div left=scrollbarWidth

edited Aug 02 '19 at 07:41

Abhishek

972
3
12
24

answered Aug 02 '19 at 05:58

Tony Benjamin

41
3

1

Can you explain that further? This does not look like valid CSS to me – Nico Haase Aug 02 '19 at 07:42

score 0 · Answer 14 · answered Nov 26 '20 at 09:44

0

put margin-right: 0px; on topNavBar works for me

answered Nov 26 '20 at 09:44

mickey

77
9

Browsers scrollbar is under my fixed div

14 Answers14

Linked