check if an element is visible while scrolling javascript code example

Example 1: how to scroll if element not visible

We can use javaScriptExecutor to scroll down
WebDriver driver = new ChromeDriver(); 
JavascriptExecutor jse =(JavascriptExecutor)driver
.jse.executeScript('window.scrollBy(0,250)', ’’);

Example 2: javascript check if element is visible on scroll

function isOnScreen(elem) {
	// if the element doesn't exist, abort
	if( elem.length == 0 ) {
		return;
	}
	var $window = jQuery(window)
	var viewport_top = $window.scrollTop()
	var viewport_height = $window.height()
	var viewport_bottom = viewport_top + viewport_height
	var $elem = jQuery(elem)
	var top = $elem.offset().top
	var height = $elem.height()
	var bottom = top + height

	return (top >= viewport_top && top < viewport_bottom) ||
	(bottom > viewport_top && bottom <= viewport_bottom) ||
	(height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
}

jQuery( document ).ready( function() {
	window.addEventListener('scroll', function(e) {
		if( isOnScreen( jQuery( '.shipping-logos' ) ) ) { /* Pass element id/class you want to check */
			alert( 'The specified container is in view.' );
 		}	
	});
});