У меня есть приложение Ionic с прокруткой:
<div ng-repeat="post in posts" >
<div id="my-image-{{$index}}" is-visible><img src="post.img" /></div>
</div>
... и я хочу запускать функцию каждый раз, когда новое изображение является активным "полностью видимым" изображением. (Только один будет полностью соответствовать.)
Я думал об использовании чего-то подобного из этого СО-вопроса:
function isScrolledIntoView(el) {
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
Но как мне получить идентификатор div, окружающих изображения? Или есть лучший способ сделать это без jQuery?
UPDATE: пробовал эту директиву... но ничего не получал в консоли.
.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;
}
}
})
Попробуйте ngInfiniteScroll, вы можете загружать любые данные после того, как окно достигло "конца" текущей коллекции, оно также может быть на botton или в верхней части. https://sroze.github.io/ngInfiniteScroll/