Question

Is there an alternative method or a trick to the hover method which can trigger a function when the cursor moves from one div to another as the user scrolls the page.

I have sort of got it working using some javascript (jQuery) on the hover event of the current post div. However, I’ve noticed the hover event only triggers when the mouse is actually moved. If the page is scrolled using the keyboard (page) up/down it does not trigger.

(I can note that soup.io for instance has found a way to get this working, but I can’t find how they do it)

Answer 1

Unfortunately, it’s quite complicated; you can no longer rely on the onMouseOver event – the only event that triggers when a page is scrolled is onScroll. The steps involved:

1. Go through elements, storing each of their widths, heights and offsets (distance from left/top of screen) in an array.
2. When the onScroll event is triggered check the last known position of the cursor against all chosen elements (go through the array) – if the cursor resides over one of the elements then call the handler.

Quick (unreliable) prototype: http://pastie.org/507589