CODEWITHSUNDEEP
htmlcss
thijmenmees
thijmenmees

Reputation: 31

How to stop a fixed element from preventing scrolling the page behind it?

I have a page with a semi-transparent sidebar with position: fixed; overlaying the rest of the page. The page has a scrollbar, but when the cursor is above the sidebar, the scrollwheel wont work.

When I was looking up this issue, I came across examples in which it just seems to work with no additional effort, like in this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2. But I just can't find why it doesn't work in my case.

Here's my code:

https://jsfiddle.net/c90zo62s/4/ (made it into a fiddle because stackoverflow kept refusing the snippet, while it was totally fine in the preview)

So when hovering the yellow area, I still want the Lorem ipsum bit to scroll, but it doesn't.

PS: I don't want to use pointer-events: none; as it has too many side-effects that are unwanted in this scenario

Upvotes: 2

Views: 60

Answers (1)

thijmenmees
thijmenmees

Reputation: 31

I finally found a fix. The scrolling content was in a div with overflow: auto;. This div did actually cover the whole screen and was thus behind the fixed sidebar. I now removed this div and made the <body> the element that scrolls. Appearently that was all it took. But then I still don't fully understand why an underlying div can't be scrolled through a fixed element, while the body can...

Upvotes: 1

Related Questions