Как запустить функцию только при прокрутке вниз внизу?

Question

Я использую версию angular2-infinite-scroll 0.1.4.

Мой плукер - это here.

Правильно он запускается только onScrollDown() один раз в начале при прокрутке.

Я попытался сменить infiniteScrollDistance на 2 и 0.8. Но все провалилось.

Как я могу запустить onScrollDown() только при прокрутке вниз внизу?

@Component({ 
    selector: 'my-app', 
    directives: [InfiniteScroll], 
    styles: [` 
    .search-results { 
     height: 20rem; 
     overflow: scroll; 
    } 
    `], 
    template: ` 
    <div class="search-results" 
     infinite-scroll 
     [infiniteScrollDistance]="0.8" 
     [immediateCheck]="true" 
     (scrolled)="onScrollDown()"> 
     <p *ngFor="let i of array"> 
     {{i}} 
     </p> 
    </div> 
    ` 
}) 
export class App { 
    array = []; 
    sum = 20; 

    constructor() { 
    for (let i = 0; i < this.sum; ++i) { 
     this.array.push(i); 
    } 
    } 

    onScrollDown() { 
    console.log('near the bottom!!'); 

    // add another 20 items 
    const start = this.sum; 
    this.sum += 20; 
    for (let i = start; i < this.sum; ++i) { 
     this.array.push(i); 
    } 
    } 
} 

Answer 1

Попробуйте это: создайте наблюдаемое, которое отслеживает движение мыши и запускает только триггеры, но только испускает значения, если мышь находится у основания. Например:

const mouseMove$ = Observable.fromEvent(document, 'mousemove') 
         .filter(event => event.clientY > SOME_VALUE); 

SOME_VALUE необходимо рассчитать в зависимости от высоты документа.

Затем создайте второй наблюдаемым, что треки прокручивать события:

const scroll$ = Observable.fromEvent(document, "scroll"); 

Затем совмещают как: создать наблюдаемую, что излучает только значение, если мышь движется в нижней части страницы, а пользователь прокручивает:

const combined$ = Observable.combineLatest(
    mouseMove$, scroll$ 
); 

, а затем подписаться на него:

combined$.subscribe(
    combined => { 
     console.log("this the mouse event", combined[0]); 
     console.log("this the scroll event", combined[1]); 

     // user is scrolling at the bottom of the page, add action here 
    } 
); 

Answer 2

Попробуйте OnScroll где-то в ловушку окна прокрутки событий ... что-то вроде этого, а затем бросить вашу функцию, которая будет делать все, что вы хотите внутри.

Javascript

window.onscroll = function() { 
    console.log("scrolling"); 
}; 

JQuery

$(window).on('scroll', function() { 
    console.log("scrolling"); 
}); 

есть функции/методы тоже, которые возвращают верхнюю и нижнюю часть окна или окна просмотра (в зависимости от того что вам нужно, и если это сырье javascript, jQuery или другой фреймворк), а затем математическая задача сделать то, что вам нужно, в тот момент, когда вы хотите, чтобы ваша функция срабатывала.

Answer 3

для моего вопрос, мне нужно изменить height: 20rem; до height: 100%;, затем он работает. Working plunker.

Кроме того, @orizens добавил official demo в файл README.md с угловым2-бесконечным прокруткой после того, как я спросил его.

---

Если вы не хотите использовать angular2-бесконечномерным прокручивать, @Angular университет дает хорошее направление, используя RxJS. Пожалуйста, проверьте его ответ.