当用户到达 Angular 10 中水平滚动条的末尾时如何调用函数？答案

【问题标题】：how to call a function when user reaches the end of horizontal scrollbar in Angular 10?当用户到达 Angular 10 中水平滚动条的末尾时如何调用函数？
【发布时间】：2022-11-23 01:29:58
【问题描述】：

我在水平滚动条中的列表中有一定数量的项目。当用户到达滚动条的末尾时，我想通过一个函数加载更多项目。我试图通过 (scroll)="onScroll()" 来实现它，但如果不能进一步滚动 scollbar，则不会调用此函数。那么，我怎么知道水平滚动条的结束呢？

我已经通过跟踪滚动条已经越过多少距离来尝试它。

【问题讨论】：

标签： javascript angular typescript scrollbar horizontal-scrolling

【解决方案1】：

我强烈建议您使用 IntersectionObserver 来查看页面底部的项目何时进入视口。这通常是性能方面的最佳实践。

有很多文章使用角度指令来实现这一点并重用这段代码（例如https://blog.prototyp.digital/how-to-implement-intersection-observer-api-in-angular/），但如果你想快速获胜，你可以从官方 IntersectionObserver 文档中改编一个例子：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

您可以简单地将回调函数传递给重新获取新数据的 IntersectionObserver。

【讨论】：

您好感谢您的回复，抱歉，我正在处理水平滚动条，但我无法检测到它的结尾。
是的，我知道。 IntersectionObserver 仍然是这个用例的最佳选择。

【解决方案2】：

在 onScroll 函数中，您需要检查滚动是否到达最右侧滚动的末尾

if (document.body.scrollWidth - document.body.scrollLeft === document.body.clientWidth) {
  // fetch some data
}

我还建议在滚动到达带有一些像素的底部之前获取数据，以免让用户等待。

例如。

if (document.body.scrollWidth - document.body.scrollLeft >= (document.body.clientWidth - 100)) {
  // fetch some data
}

【讨论】：

嘿米娜，如果它与水平滚动条有关，那我该怎么做？
@NitinSaini，我刚刚更新了答案，请再次检查。