如何检测滚动到 html 元素的底部 [英] How to detect scroll to bottom of html element

问题描述

我通过 Id 引用了这个元素:

I have this element that I'm referencing by Id:

    let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');

我需要在浏览器到达元素底部时监听.

I need to listen when the browser is has reached the bottom of the element.

如何实现这一目标?

推荐答案

我认为您要做的就是检测滚动的位置.

I think that all you want to do is detect the position of scroll.

@HostListener("window:scroll", ["$event"])
onWindowScroll() {
//In chrome and some browser scroll is given to body tag
let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
let max = document.documentElement.scrollHeight;
// pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
 if(pos == max )   {
 //Do your action here
 }
}

另外不要忘记从@angular/core 导入 HostListener.

Also don't forget to import HostListener from @angular/core.

这篇关于如何检测滚动到 html 元素的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！