Detect also when scrolling from bottom to top

[Ghislain Flandin]

Hi !

Is there a way to make it detecting if an element enter to viewport even when I'm scrolling from bottom to top ?
Currently, as far as I understand, it only works scrolling from top to the bottom of the page.
Is there a way to make it work on both sense ?

Thanks for your feedback.

Best !

[Russell Samora]

Currently no, though you could extend the code so it does that direction as well. However, there is an option exit callback, which does work in the reverse direction. So you could create an additional item that would trigger on exit to notify that is invisible in the same location possibly. I've used a similar effect here.

[Jason Kao]

@ghisleouf if you want behavior that is more like scrollama or graph-scroll (i.e. triggering the enter callback in the reverse direction), you can add a "bottom edge condition" to the entered boolean .

function updateScroll() {
  ...
  elements = elements.filter(el => {
    const rect = el.getBoundingClientRect();
    const { top, bottom } = rect; // line 51
    const entered = top < targetFromTop && bottom > targetFromTop; // line 52
  ...
}

[Benji Bilheimer]

Hey @jsonkao I had this exact issue and your few lines fixed it. Thank you very much!

@russellgoldenberg any reason not to add these lines to your project?

[Russell Samora]

Yeah the problem with this logic (just tested it out) is that it only fires when the element is within that specific region. So if you were to jump the page rather than scroll (eg. on refresh, anchor link, etc) it wouldn't fire, even if the element is in view.

[Benji Bilheimer]

Aw, shucks. Well, if I get more time on this project to get it working I may have a PR at some point!