Example:
document.elementFromPoint(x, y);
Definition from Here:
Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.
Browser support from Here:
- Internet Explorer 5.5+
- Mozilla FireFox 3+
- Safari Win 5+
- Google Chrome 4+
- Opera 10.53+
Solution 1 Working Example*:
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
$(containerElement).mousewheel(function(event) {
$(elementClass).trigger('mouseleave');
var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
$(element).trigger('mouseenter');
});
* there are some bugs, but you get the idea
Solution 2:
Use debounce
from lodash or underscore libraries, to reduce load on client.
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
var debounced = _.debounce(function () {
$(elementClass).trigger('mouseleave');
var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
$(element).trigger('mouseenter');
}, 150);
$(containerElement).mousewheel(function (event) {
debounced();
});