Determine if the element is above or below the page fold
I have multiple pages with multiple input fields where users can enter text. Some of them need to be filled in before clicking the "Next" button. I have validation errors popping up for the user to see, however, if the question is, if from a page, I would like the page to scroll through it instead of looking for the missing / wrong field.
I have scrolling in place but I am having trouble figuring out which element is scrolling for an element. For example, if the page fold entered above I would like to scroll to the label so they can see the error and input. But if it's below the crease, I would like to select the entrance to show above the crease. It makes sense?
I guess I am really asking if there is a way to determine where an element is on the page. And if it's above the fold scroll to the label, but if it's below the fold, scroll to the input?
Right now I'm just scrolling through the error input field.
$(".container-content").mCustomScrollbar("scrollTo",$('.container-content').find('input.error:first')); //Yes I am using a plugin for the scroll
If I just go to the label then it looks like this.
source to share
You can use this function: Jsfiddle
function isElementInViewport (el) {
var rect = el[0].getBoundingClientRect();
return (rect.top>-1 && rect.bottom <= $(window).height());
}
originally posted here
New api you can use in just 11 extra steps lol https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility
source to share