我已经确定了水平滚动条列表中的项目数量。我想通过一个函数在用户到达滚动条末尾时加载更多的项目。我已经尝试通过（scroll）=“onScroll（）”来实现它，但是如果滚动条不能进一步滚动，这个函数就不会被调用。那么，我如何知道水平滚动条的末尾呢？我试过通过跟踪有多少距离，滚动条已经跨越。
bvhaajcl1#
我强烈建议您使用IntersectionObserver来查看页面底部的项何时进入视口。这通常是性能方面的最佳实践。有很多文章介绍如何使用Angular 指令来实现这一点并重用这段代码（例如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，从中重新获取新数据。
yrwegjxp2#
在onScroll函数中，您需要检查滚动是否到达最右侧滚动的末尾
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 }
2条答案
按热度按时间bvhaajcl1#
我强烈建议您使用IntersectionObserver来查看页面底部的项何时进入视口。这通常是性能方面的最佳实践。
有很多文章介绍如何使用Angular 指令来实现这一点并重用这段代码（例如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，从中重新获取新数据。
yrwegjxp2#
在
onScroll函数中，您需要检查滚动是否到达最右侧滚动的末尾我还建议在滚动到达底部之前获取一些像素的数据，以免让用户等待。
比如说。