Just think of having an element in a scrollable parent (the CSS property overflow
is set to scroll
) and you want to test whether the element is visible or not.
Using this little function you can do the trick:
function isInView(node){
var offsetParent = node.offsetParent;
var top = offsetParent.scrollTop;
var height = offsetParent.offsetHeight;
var y = node.offsetTop;
return y >= top && y <= (top + height);
}
And here’s a small use case - this one scrolls the element into the visible region, if it is not already in the view:
if(!isInView(element)) {
element.scrollIntoView();
}