Question

我正在寻找一种js解决方案，该解决方案可以检测用户何时使用overflow: auto滚动到div的底部。

SO上有很多解决方案，描述了如何通过onscroll事件来实现，但是我想知道是否可以使用不需要附加的新技术（例如IntersectionObserver）来做到这一点滚动事件。

Answer 1

为此使用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>

Answer 2

像“接受”的答案所示，仅使用IntersectionObserver无效：

const io = new IntersectionObserver(onIntersection, {threshold: 1})

如果元素的高度大于视口高度，则threshold永远不会是1。相反，我找到了一种针对高度可变的内容的更好解决方案：在要跟踪的元素内插入一个1px子元素，然后通过IntersectionObserver跟踪该子元素而不是元素本身。这样，当用户向下滚动到元素底部时，将调用onIntersection回调。

Answer 3

要解决@catamphetamine提出的问题，即如果元素大于视口，它将永远不会达到阈值1，则可以将父元素的边界展平到自身底部，然后观察threshold: 0而不是相交：

const io = new IntersectionObserver(onIntersection, {
        rootMargin: '-100% 0px 0px 0px', 
        threshold: 0
    })

Answer 4

您可以使用 entry.boundingClientRect 告诉底部是否在视口中。如果bottom小于0，则表示在视口上方，如果底部大于窗口大小，则表示在视口下方，则不在视口内。

当它在视口中时，每个滚动也必须进行阈值检查，每 10% 切片。

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => { 
        const bcr = entry.boundingClientRect;
        const isBottomVisible = (bcr.bottom < window.innerHeight) && bcr.bottom;
        console.log(bcr.top, bcr.bottom, window.innerHeight, {isBottomVisible});
      });
    }, {threshold: Array(11).fill().map( (_, i) => i*.1)});
    observer.observe(this._templateContainer );

是否检测到该用户已滚动到div的底部而没有滚动事件？

4 个答案: