Event that gets fired before (not after!) DOM elements are scrolled in javascript

Question

Basically, I would like to do some pre-processing before the DOM elements are scrolled. The problem is that the scroll event is fired AFTER the DOM elements are scrolled. I know that when you use the mousewheel to scroll, the mousewheel scroll event gets fired before DOM elements are scrolled although it does not provide you with the anticipated scroll position and it is only one type of scroll. I am wondering if there is any event that gets fired for every scroll method(eg. mousewheel, dragging the scroll bar, pushing the down arrow etc.) BEFORE the DOM elements are scrolled. It does not have to be an event. I am not trying to scroll to a certain position so scrollTo would not be applicable.

The chain of event with on scroll: User scrolls -> DOM elements physically scroll -> fires onScroll event -> handle stuff

The desired chain of event: User scrolls -> some event is captured and do what I want to do -> DOM elements physically scroll -> fires onScroll event -> handle stuff

Sneakers

I believe you are out of luck. – Bink

What are you trying to do before the DOM scroll that can't be done when the onScroll even fires? If you share that information with us perhaps we can guide you to alternative solution. – Buddle

I am trying to "stick" content. As the user scrolls and the scroll top reaches certain pixel, some DOM elements start to "stick". At that brief moment to "stick" (replacing the original element with cloned element and position where it should "stick"), the browser seems to flicker. If I position the cloned elements right before the scroll (tested with mousewheel event), it does not flicker. – Sneakers

sticking controlls to the top of the page can be done using position and float attributes in css. Is this what you want to do, Stick a ribbon to the top of the page, even if the user scrolls down..? – Libove

I am not sticking at the top of the page. Elements stick only a certain range – Sneakers

Answer 1

Heres something you might want to try.

Give your page overflow:hidden so that no scroll bars appear, then place an absolutely positioned div with the correct width & height over the content. When this div is scrolled, you can then update any underlying content before re-triggering the event.

You would need to pass through clicks etc as well, so this is really a hack. Something like jQuery would help with the triggering of the 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

Magaretmagas

I think this is the only way. – Sneakers

@Chris Hong: I disagree. pointer-events may help for Chrome, Safari and Firefox but other than that it's going to take a lot of JavaScript to approximate mouse positions so that the cursor changes to identify links. title attributes would be rendered pointless and text selection will be even more difficult. This is definitely not the way to go, hack or not. A more robust hack would involve capturing onmousewheel, DOMMouseScroll and keydown events to detect when a user is scrolling, but it doesn't help for when they drag the scrollbar. – Blackmarket

Thinking about it some more, the DIV wouldn't have to cover the content, in fact could be just 1px wide on the right margin, causing a scrollbar to appear which is then used to capture and trigger all scroll events (it would be the only element that wasnt overflow: hidden). And we would either need a timer ot get the current document height, or construct a cross-browser 'height:100%' compatible solution – Magaretmagas

Answer 2

The best you can do is when onScroll fires, if scrollTop > thingToStick's distance from the top, then set position: fixed on thingToStick otherwise, set position to whatever it was originally. It'll flicker when changing from not-sticking to sticking, but besides that, you won't get any flickering.

in sudo-ish code:

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

In browsers that don't support fixed positioning, you're stuck with the flicker...

Duleba

Thanks for the advice. But we are trying to avoid any flickering. – Sneakers

Answer 3

Never tryed this before, but to break the chain of event it would be possible to :

1. Capture the scroll event
2. Do your stuff
3. Use preventDefault() and stopPropagation to inhibit the event
4. Fake a new scroll event using the original one (this should be feasible I think)

Hope this will help.

Unilingual

At the point you capture the scroll event, the elements already have been scrolled. – Sneakers

Scroll is an asynchronous event, this is why it cannot be prevented via the scroll event object you receive in onscroll listeners ;) – Sex