如何检测滚动到 html 元素的底部 [英] How to detect scroll to bottom of html element
本文介绍了如何检测滚动到 html 元素的底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我通过 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屋!
查看全文