Question

我尝试用滚动创建一个滑块，我成功了：

@HostListener('window:scroll', ['$event'])
scrollEvent(event) {
  console.log('afterScroll:', this.afterScroll, 'pageYOffset:', window.pageYOffset);
  this.afterScroll = window.pageYOffset;
  if (window.pageYOffset > this.scrollTop) {
    // DOWN
    this.getNextProject();
  } else {
    // TOP
    this.getPrevProject();
  }
  this.scrollTop = this.afterScroll;
}

好吧，我设法检测到滚动，向下和向上。但它需要很多时间才能发挥作用，所以它不能很好地发挥作用。

滚动时我想要一种风格效果： https://www.raoul-gaillard.com/

我想知道如何在这个功能上只打一次电话，就像它不会发疯一样。

如果您想查看网站：http://narty.fr/demo/new/

（抱歉我的英语不好）

Answer 1

在javascript中无法检测到滚动事件的结束。此事件将在每个行进的像素上触发。

防止这种过度通话。你必须处理timeout / clearTimeout技巧。

private timeoutQueue: number;

@HostListener('window:scroll', ['$event'])
scrollEvent(event) {
    /**
     * If another timeout is on queue who have to be process, let cancel it.
     **/
    if(this.timeoutQueue) {
        clearTimeout(this.timeoutQueue);
    }

    /**
     We store timeout uniq reference on class property to be able to cancel it if another scroll is fire before execution time of this timeout.
    **/
    this.timeoutQueue = window.setTimeout(() => {

        console.log('afterScroll:', this.afterScroll, 'pageYOffset:', window.pageYOffset);
        this.afterScroll = window.pageYOffset;
        if (window.pageYOffset > this.scrollTop) {
            // DOWN
            this.getNextProject();
        } else {
            // TOP
            this.getPrevProject();
        }
        this.scrollTop = this.afterScroll;

    }, 1000); // I recommand you to keep 1second timeout, is anough smooth to not be detect by user, and anough long to not spam interpreter.
}

角度 - 带滚动的滑块

1 个答案: