在没有滚动事件的情况下检测到用户已滚动到 div 的底部? [英] Detecting that user has scrolled to the bottom of the div without scroll event?

问题描述

我正在寻找检测用户何时使用 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屋！