У меня есть этот элемент, который я ссылаюсь на Id:
let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
Мне нужно слушать, когда браузер достиг нижней части элемента.
Как достичь этого?
У меня есть этот элемент, который я ссылаюсь на Id:
let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
Мне нужно слушать, когда браузер достиг нижней части элемента.
Как достичь этого?
Я думаю, что все, что вы хотите сделать, это определить положение свитка.
@HostListener("window:scroll", ["$event"])
onWindowScroll() {
//In chrome and some browser scroll is given to body tag
let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
let max = document.documentElement.scrollHeight;
// pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
if(pos == max ) {
//Do your action here
}
}
Также не забудьте импортировать HostListener из @angular/core.
Вы можете проверить, прокручивается ли пользователь снизу или нет ниже.
Html файл
<div (scroll)="onScroll($event)">
...
...
</div>
машинописный файл
import { Component, HostListener } from '@angular/core';
...
...
@HostListener('scroll', ['$event'])
onScroll(event: any) {
// visible height + pixel scrolled >= total height
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
console.log("End");
}
}
Вы можете сделать это с наблюдаемым наблюдением за прокруткой события вашего контейнера.
Или вы можете создать прослушиватель хоста для вашего компонента, который прослушивает событие прокрутки. Пожалуйста, взгляните на этот вопрос. (Я не тестировал его с помощью хост-слушателя, но это должно работать.)
Добавьте следующий код к вашему компоненту для наблюдаемого подхода (я скопировал часть кода из этого сообщения в блоге.):
ngOnInit() {
/*
* Create the observable from an event, in this case, the window scroll event
* then map each event so we can get a new value from it
* i.e. over time, we are just dealing with a collection:
* (map [e1, e2, e3, ...]) -> [t1, t2, t3, ...]
*/
let tracker = document.getElementById('th-infinite-scroll-tracker');
let windowYOffsetObservable = Observable.fromEvent(tracker, 'scroll').map(() => {
// I don't actually care about the event, I just need to get the window offset (scroll position)
return tracker.scrollTop;
});
// subscribe to our Observable so that for each new item, our callback runs
// this is our event handler
let scrollSubscription = windowYOffsetObservable.subscribe((scrollPos) => {
let limit = tracker.scrollHeight - tracker.clientHeight;
console.log(scrollPos, limit);
if (scrollPos === limit) {
alert('end reached');
}
});
}
Обновить
Другой способ и, вероятно, лучше всего было бы создать директиву для вашей логики отслеживания. Затем вы можете легко использовать HostListener
для привязки к событию прокрутки.
Код машинописного текста:
import {
Directive, HostListener
}
from '@angular/core';
@Directive({
selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
@HostListener('scroll', ['$event']);
onScroll(event) {
// do tracking
// console.log('scrolled', event.target.scrollTop);
// Listen to click events in the component
let tracker = event.target;
let limit = tracker.scrollHeight - tracker.clientHeight;
console.log(event.target.scrollTop, limit);
if (event.target.scrollTop === limit) {
alert('end reached');
}
}
constructor() {}
}
Разметка в компоненте (добавьте свою директиву)
<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 500px;" scrollTracker>
.... your container with scrollbar ...
</div>
Сейчас я буквально работаю над этим и обнаружил, что это наиболее универсальный вариант использования слова " я ".
Как упоминал YASH DAVE, использование Host Listener - лучший выбор для реализации Angular "onScroll". Однако " Окно: Прокрутка " не сработало для моего варианта использования (таблица, вставленная в панель управления). Так что мне повезло, делая это
@HostListener('scroll', ['$event.target'])
onScroll(elem){
if(( elem.offsetHeight + elem.scrollTop) >= elem.scrollHeight) {
console.log("It Lit");
}
}'
CSS:
:host {
display: block;
max-height: 700px;
width: 100%;
overflow-y: scroll;
scroll-behavior: auto;
}
Объяснение:
Кроме того, просмотрите Это для понимания offsetHeight, clientHeight, scrollHeight.