我如何知道IntersectionObserver滚动方向？ [英] How do I know the IntersectionObserver scroll direction?

问题描述

在返回的对象中，我看到的最接近的可能性是与 boundingClientRect 保存最后一个滚动位置的类型，但我不知道处理 boundingClientRect 最终会导致性能问题。

是否可以使用交点事件计算滚动方向（上/下）？

我已经添加了这个基本片段，所以如果有人可以帮助我。

我会非常感谢。

是代码片段：

var options = {rootMargin：'0px'，threshold （entry.isIntersecting）{console.log（'entry'，entry）;}}）;}; var elementToObserve = document.querySelector（）; 1.0}函数回调（条目，观察者）{entries.forEach （'#element'）; var observer = new IntersectionObserver（callback，options）; observer.observe（elementToObserve）;

  #element {margin：1500px auto;宽度：150px; height：150px;背景：#ccc;白颜色; font-family：sans-serif; font-weight：100; font-size：25px; text-align：center; line-height：150px;}  

< div id = 元素>观察< / div>

要知道这一点，所以我可以将它应用于固定的标题菜单上以显示/隐藏它。 比较 boundingClientRect 和 rootBounds 来自条目，您可以轻松知道目标是高于还是低于

在 callback（）期间，您检查isAbove / isBelow，最后存储它进入wasAbove / wasBelow。
下一次，如果目标在视口中（例如），您可以检查它是高于还是低于。所以你知道它是来自顶部还是底部。

您可以尝试如下所示：

  var wasAbove = false; 
 
 function callback（entries，observer）{
 entries.forEach（entry => {
 const isAbove = entry.boundingClientRect.y< entry.rootBounds.y; 
 
 if（entry.isIntersecting）{
 if（wasAbove）{
 //来自上面
} 
} 
 
 wasAbove = isAbove; 
}）; 
} 
  

希望这有助于您。

So, how do I know the scroll direction when the event it's triggered?

In the returned object the closest possibility I see is interacting with the boundingClientRect kind of saving the last scroll position but I don't know if handling boundingClientRect will end up on performance issues.

Is it possible to use the intersection event to figure out the scroll direction (up / down)?

I have added this basic snippet, so if someone can help me.
I will be very thankful.

Here is the snippet:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

function callback(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('entry', entry);
    }
  });
};

var elementToObserve = document.querySelector('#element');
var observer = new IntersectionObserver(callback, options);

observer.observe(elementToObserve);

#element {
  margin: 1500px auto;
  width: 150px;
  height: 150px;
  background: #ccc;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 25px;
  text-align: center;
  line-height: 150px;
}

<div id="element">Observed</div>

I would like to know this, so I can apply this on fixed headers menu to show/hide it

解决方案

Comparing boundingClientRect and rootBounds from entry, you can easily know if the target is above or below the viewport.

During callback(), you check isAbove/isBelow then, at the end, you store it into wasAbove/wasBelow. Next time, if the target comes in viewport (for example), you can check if it was above or below. So you know if it comes from top or bottom.

You can try something like this:

var wasAbove = false;

function callback(entries, observer) {
    entries.forEach(entry => {
        const isAbove = entry.boundingClientRect.y < entry.rootBounds.y;

        if (entry.isIntersecting) {
            if (wasAbove) {
                // Comes from top
            }
        }

        wasAbove = isAbove;
    });
}

Hope this helps.

这篇关于我如何知道IntersectionObserver滚动方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！