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 

  1. Find visible page Top and Bottom 
  2. Find Element Top and Bottom
  3. The element is visible if its Top less than document view top and its Bottom greater than document view bottom
$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));




Follow this blog by Email

Popular Posts