Menu
The question is so long that coming up with a title that summarises it proved tricky.
So anyway. I have a div that has overflow: auto and that frequently does flow over so the scrollbar appears. Then I have a div that has position: fixed and is positioned on top of the content div.
Now when I have a fixed-positioned div over the html body itself, I can scroll the document with the wheel when I have my mouse over the div. Not so lucky with the aforementioned div.
Is there a way to scroll the div "through" the fixed-positioned one?
I noticed that even catching the scroll event when over the fixed div isn't easy; the event isn't fired unless the fixed div itself is scrollable.
I made a simple jsFiddle here and for your convenience stripped it of all the JavaScript I tried.
Edit: I need to retain other mouse functions with the fixed div so turning pointer-events off isn't the solution in my case.
970
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To make div fixed scrolling to that div with CSS, we can use the position: sticky CSS property. position: -webkit-sticky; position: sticky; top: 0; z-index: 1; to set position to sticky and z-index to 1 to make the element with the sticky position show on top after we scroll to it.
To set the scroll position of an element (the other div ), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div .
What you are looking for is pointer-events: none;
This makes the pointer not interact with that div essentially, so just do
#fixed {
pointer-events: none;
}
DEMO
And you will get your desired outcome with no JS required. This will stop all other interaction with the div though, if you need to interact with it for some reason I'm afraid you'll have to look into a JS solution.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
