An event that fires before (not after!) DOM elements scrolls in javascript

Question

Basically, I would like to do preprocessing before scrolling through the DOM elements. The problem is that the scroll event is fired AFTER the DOM elements scroll. I know that when you use the mouse wheel to scroll, the mouse scroll event is fired until the DOM elements scroll, although it does not provide you with the expected scroll position, and this is only one type of scroll. I am wondering if there is any event that fires for each scroll method (e.g. mousewheel, dragging the scroll bar, pressing the down arrow, etc.) BEFORE scrolling the DOM elements. This should not be an event. I am not trying to move to a specific position, so scrollTo will not apply.

Scrolling event chain: Custom scrolls → DOM elements physically scroll → onScroll event fires → process material

Target chain of events: Custom scrolls → some event is captured and does what I want to do → DOM elements are physically scrolled → onScroll event is fired → process the material

Answer 1

Here is what you can try.

Give the overflow:hidden page so that the scrollbars do not appear, and then set the absolutely positioned div with the correct width and height above the content. When this div scrolls, you can update any underlying content before re-triggering the event.

You also need to go through clicks, etc., so it really hack. Something like jQuery will help with triggering events and measuring the height of the content.

EDIT: css pointer-events:none may help here depending on the browser. See https://developer.mozilla.org/en/css/pointer-events

Answer 2

The best you can do is when onScroll fires, if scrollTop > thingToStick distance above, then set position: fixed to thingToStick otherwise, set position to what it was originally. It will flicker when moving from non-stick to stick, but also, you will not flicker.

in sudo-ish code:

 onScroll = function() { if(scrollTop > thingToStick.y) thingToStick.position = "fixed"; else thingToStick.position = "relative"; } 

In browsers that do not support fixed positioning, you are stuck in flickering ...

Answer 3

I have never tried this before, but to break the chain of events, one could:

• Scrolling Event Capture
• Make your stuff
• Use preventDefault () and stopPropagation to block the event
• Fake a new scroll event using the original (this should be possible, I think)

Hope this helps.