How to register mouseover / enter event to scroll past (jumping) elements?

Question

I want to register a javascript event for any of these things:

• User hover over any element 'a'
• The user scrolls the page up / up, and the movement of any element "a" crosses the cursor position.

The first one is obviously very simple, but I'm afraid of C # 2, because in Chrome the scrolling is not smooth and the elements will “skip” from the cursor position without triggering typical JS events.

Answer 1

Scrolling is also "nonsmooth" in FF, etc., if you scroll fast enough.

I just have the feeling that it will not be worth what you might need:

• load, get the position of each anchor and determine its area
• collect all possible coordinates in an array of objects (index)
  • { id: 'my-anchor-1', x: 100, y: 100 }
• onmousemove, check your coordinates on your array (i.e. check each coordinate between the old mouse position and the new mouse position, as other commentators have already noted).

This way you do most of the calculations and select the DOM in front and make it much easier for the mousemove event. This can become messy if the content added to the page later shifts the bindings around: you have to recount the array, but this happens less often with respect to mousemove, and if everything you do is added, you can simply add to it.

Solving the problem of resizing, etc. It really depends on who your audience is and how many anchors you think you will have in the worst case. Since this is mousemove, we are talking about desktops / laptops where window resizing would be very rare, especially with respect to mousemove events.

If you have only a few anchors, and you think that there will be many changes, then creating an index will not make much sense, and you can do the calculation in the event itself (but at least the cache is the choice of the DOM). But if you think that you will have a ton of anchors, especially if they are unlikely to change much, I think that indexing them makes a lot of sense to increase productivity.

Answer 2

I hope you don't mind that I used jQuery:

 var y = []; var ym = []; $(document).mousemove(function(e) { ym.push(e.pageY); }); $(document).scroll(function(e) { y.push(document.body.scrollTop+ym[ym.length-1]); if(y.length-1) { if((y[y.length-2] < $("#a").offset().top && y[y.length-1] > $("#a").offset().top)+$("#a").height() || y[y.length-1] < $("#a").offset().top && y[y.length-2] > $("#a").offset().top)+$("#a").height()) { if($("#a").offset().left < xm[xm.length-1] && $("#a").offset().left+$("#a").width() > xm[xm.length-1]) { HERE IS your desired function } } } }); 

I don't know if this will work, but I think you should try.