SodhanaLibrary

Whenever we scroll elements, some HTML elements will be hidden. This tutorial gives a way to find out whether element is part of visible page or not.

Program Flow 

$scope.isScrolledIntoView = function(id)
{
    var myEl = angular.element( document.querySelector( '#'+id ) );
    
    // Find Page Top and Bottom
    var docViewTop = document.body.scrollTop;
    var docViewBottom = docViewTop + $window.innerHeight;

    // Find Element Top And Bottom   
    var elemTop = myEl[0].offsetTop;
    var elemBottom = elemTop + myEl[0].offsetHeight;

    //If the element is part of visible page
    var visible = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

    alert(visible);
}