在没有滚动事件的情况下检测到用户已滚动到 div 的底部? [英] Detecting that user has scrolled to the bottom of the div without scroll event?
本文介绍了在没有滚动事件的情况下检测到用户已滚动到 div 的底部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找检测用户何时使用 overflow: auto
滚动到 div 底部的 js 解决方案.
I'm looking for js solution that detects when user has scrolled to the bottom of the div with overflow: auto
.
SO 上有很多解决方案描述了如何使用 onscroll
事件来实现它,但我想知道是否可以使用 IntersectionObserver
等新技术来实现这一点这不需要附加滚动事件.
There are plenty of solutions here on SO that describe how to achieve it with onscroll
event, but I was wondering if this can be done this with newer technology like IntersectionObserver
that doesn’t require attaching the scroll event.
推荐答案
使用 IntersectionObserver
为此
const onScrollToBottom = document.getElementById('on-scroll-to-bottom')
const onIntersection = ([{isIntersecting, target}]) =>
isIntersecting && (target.style.backgroundColor = 'green');
const io = new IntersectionObserver(onIntersection, {threshold: 1})
io.observe(onScrollToBottom)
section {
color: white;
}
#on-scroll-to-bottom {
margin-top: 100vh;
min-height: 50vh;
background-color: red;
}
#visible {
height: 90vh;
background-color: blue;
}
<section id="visible">Visible Section</section>
<section id="on-scroll-to-bottom">On Scroll to Bottom</section>
这篇关于在没有滚动事件的情况下检测到用户已滚动到 div 的底部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文