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。

然后创建一个跟踪滚动事件的第二个observable：

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

然后将两者结合起来：创建一个只在鼠标移动到页面底部并且用户正在滚动时才发出值的observable：

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在angular2-infinite-scroll的official demo文件中添加了README.md。

如果您不想使用 angular2-infinite-scroll ， @Angular大学使用RxJS提供了一个很好的方向。请检查他的答案。

如何在靠近底部向下滚动时运行功能？

3 个答案: