0

I have an Ionic app that has a scrolling view like this:

<div ng-repeat="post in posts" >
  <div id="my-image-{{$index}}" is-visible><img src="post.img" /></div>
</div>

...and I want to trigger a function each time a new image is the active "fully visible" image. (Only one will fully fit.)

I was thinking of using something like this from this SO question:

  function isScrolledIntoView(el) {
      var elemTop = el.getBoundingClientRect().top;
      var elemBottom = el.getBoundingClientRect().bottom;

      var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
      return isVisible;
  }

But how do I get the id of the divs surrounding the images? Or is there a better way to accomplish this without jQuery?

UPDATE: Tried this directive... but don't get anything in the console.

.directive('isVisible', function(){
  return{
    restrict: 'AE',
    link: function($scope, $element,$attr){
      var elemTop = $element.getBoundingClientRect().top;
      var elemBottom = $element.getBoundingClientRect().bottom;
      var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
      console.log($element);
      console.log("VISIBLE: " + isVisible);
      return isVisible;
    }
  }
})
Community
  • 1
  • 1
lilbiscuit
  • 1,859
  • 5
  • 27
  • 45
  • Did you try writing a directive? You can use jslite inside and try the solution given in the other SO question. – Roy Apr 02 '16 at 13:26
  • @Roy - Trying but can't get directive to work...see updated question...thanks. – lilbiscuit Apr 02 '16 at 14:38

1 Answers1

0

Try ngInfiniteScroll, you can load any data once the window has reached the "end" of the current collection, it can be on the botton or the top too I think. https://sroze.github.io/ngInfiniteScroll/

Mariano Argañaraz
  • 1,051
  • 10
  • 20