Javascript

Find if an element is completely visible in the viewport

Here is the JS code to find out if a given element on the DOM is completely visible in the browser window viewport or not:

function isInViewport(element) {
	var rect = element.getBoundingClientRect();
	var html = document.documentElement;

	if(
	    rect.top >=0 && rect.left >=0 
	    && rect.bottom <= (window.innerHeight || html.clientHeight) 
	    && rect.right <= (window.innerWidth || html.clientWidth)
	) {
	    return true;
	}
	else {
	    return false;
	}
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s