在 Angular5 中滚动 X 量后，如何使按钮出现？

Question

我正在制作一个 Angular5 应用程序。在我的主页上滚动经过轮播后，我希望屏幕上出现一个按钮，可以将您带回顶部。

我尝试使用 @HostListener("window:scroll", []) 来做到这一点。我想出了按钮如何将您带回顶部，但我不知道如何在专门滚动过轮播后让它出现。

这就是我目前拥有的，???是我不知道的部分。

  @HostListener("window:scroll", [])
  onScroll(): string {
    if (window.pageYOffset <= ???) {
      return this.state;
    }
  }

State 是一个字符串：'none'，通过 HTML 属性绑定动态设置 style.sisplay。

这是我的应用程序草图，可以使事情更清楚。

提前致谢！

Answer 1

让滚动事件检查 y 的值，看它是否大于轮播位置，如果是，return 可见显示类型，

@HostListener("window:scroll", [])
  onScroll(): string {
    let carouselElement = document.getElementById('yourElementId');
    let carouselRect = carouselElement.getBoundingClientRect();
    let carouselYPos = carouselRect.top;

    if (window.pageYOffset <=carouselYPos) {
      return this.state;
    }
  }

在 Angular5 中滚动 X 量后，如何使按钮出现？

How can I make a button appear after scrolling X amount in Angular5?

single-page-application

angular

angular5