How can I make page scrolling trigger mouseover events?

Question

When the mouse starts hovering over an element because of scrolling (either by wheel, or by keyboard scrolling), it does not trigger a mouseover event on the elements it is hovering (Chrome 6 on OSX). What would be an elegant way to trigger the mouseover event for the correct elements when scrolling?

Answer 1

Honestly, this is gonna be a pain. You'll have to

1. determine the size and position of every element that should get a mouseover handler.
2. add a scroll listener to the window.
3. In the handler, get the mouse cursor position and pageOffset.
4. Find out which element(s) the cursor is in.
5. manually call the actual mouseover handler
6. (Find out which elements the cursor has left, if you want some mouseout behaviour too)

You may need to re-calculate the elements' positions and sizes if they are dynamic. (move 1. beneath 3.)

While this should work fine with block-level elements, I have absolutely no idea on a solution for inline elements.

Answer 2

This is much more simple in the modern day web using document.elementsFromPoint :

1. Add a scroll listener to the window.
2. In the handler, call document.elementsFromPoint .
3. Manually call the actual mouseover handler for those elements.
4. Manually call the actual mouseleave handler for elements no longer being hovered.

Answer 3

Try some hack like myDiv.style.opacity = 1+Math.random(); on scroll ;)