Scrolling on top of position fixed element does not scroll container

Question

I have a problem not being able to scroll on top of a position fixed element, inside a container with overflow:scroll.

.container {overflow: scroll; height: 200px;}
.right {position: fixed;}
.left {height: 2000px;}

Consider this example: jsfiddle .

If you scroll anywhere inside the container, the page scrolls. However, if you scroll with the cursor on top of the fixed element (content right fixed), the container does not scroll.

Any ideas?

EDIT

I also need to be able to click the content right fixed, as it is a button going back to the previous page. Hence, z-index: -1; wont work.

EDIT EDIT

I found a solution. By using jQuery mousewheel and giving the container a scroll based on the mousewheel function of the.right class, it works just fine. See updated jsfiddle , the jQuery mousewheel is directly included in the js.

Answer 1

An element set to position: fixed or position: absolute is no longer considered to be inside its parent container.

When the mouse cursor is above the fixed element, it is trying to scroll on the outermost document, which is not tall enough to require scrolling.

If you resize the output section of your CodePen to be shorter than the height of the content you currently have there, then try scrolling on top of the fixed element, you'll see what I'm talking about.

Answer 2

This is expected behavior - but you can fix this pushing the right behind the container in the stacking order by adding z-index: -1 to it. But you won't be able to click the link in the right then.

See the demo below:

 .container { overflow: scroll; float: left; width: 100%; height: 200px; } .left, .right { float: left; } .left { width: 60%; height: 2000px; border: 3px solid blue; } .right { width: 40%; position: fixed; border: 3px solid red; left: 60%; z-index: -1; }

 <div class="container"> <div class="left"> content left </div> <a href="#" class="right"> content right fixed </a> </div>

Answer 3

For position fixed element need to add

pointer-events: none

tested on chrome and mozilla