When scroll hits top of waypoint

[lightninglu10]

Hey guys, I want to trigger something when my scroll hits the top of the waypoint, not when the waypoint gets into the viewport. Is there anyway to do this?

[jamesplease]

Hey there @lightninglu10 ! I'm happy to help out, but i'm not sure I understand what you're trying to do. Can you try and provide some more details?

For instance, what do you mean by "my scroll"? Do you mean that you want to trigger some action when an element enters the viewport?

[lightninglu10]

Hey @jmeas !

What I was trying to do was scroll down to a certain point in my app, and once I hit that point on scroll (the top of my scroll viewport), then trigger an action.

I don't care when the element enters, only when it hits the top of my viewport.

For reference, I used this code instead of waypoint because I couldn't figure out how to get waypoint to work: https://stackoverflow.com/questions/43950489/how-to-trigger-animations-in-a-react-app-based-on-the-scroll-position

[jamesplease]

Have you tried the onLeaveprop? That should do what you're looking for. You'll want to check the positions that are passed as args to that callback to filter out when the waypoint leave from the top.

[lightninglu10]

Then it becomes really weird and I have to set my waypoint as like a small height element. What I wanted to do was wrap the area where I wanted my trigger to be active, and then once I hit that area from the top of the viewport, then trigger.

With what you're saying it makes the code kinda messy.

[jamesplease]

@lightninglu10 , can you share some code that you tried? I may be misunderstanding which part that you think will be messy.

Just to make sure that I communicated my above recommendation clearly, I'll share some code with you. I was thinking something like this:

import { Component } from 'react';
import Waypoint from 'react-waypoint';

class MyComponent extends Component {
  render() {
    return (
      <Waypoint onLeave={this.onLeave}/>
    );
  }
  
  onLeave = ({ currentPosition, previousPosition }) => {
    const isAbove = currentPosition === Waypoint.above;
    const wasInside = previousPosition === Waypoint.inside;
    if (isAbove && wasInside) {
      console.log('Alright!');
    }
  }
}

This will log out "Alright!" to the viewport whenever this waypoint crosses the top of the viewport, which I think is what you're going for. Sorry if I'm still misunderstanding! If you paste some code, it may help me get what you mean.

Thanks for your patience!

[lightninglu10]

@jmeas Hmm I was thinking something like this.

import { Component } from 'react';
import Waypoint from 'react-waypoint';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <div>
          .. (stuff here)
         </div>
        <Waypoint onLeave={this.onLeave}>
          <div some stuff in this div />
          <div some stuff in this div />
          <div some stuff in this div />
        </Waypoint>
    );
  }
  
  onLeave = ({ currentPosition, previousPosition }) => {
    const isAbove = currentPosition === Waypoint.above;
    const wasInside = previousPosition === Waypoint.inside;
    if (isAbove && wasInside) {
      console.log('Alright!');
    }
  }
}

So basically the waypoint starts halfway down the page. I don't care that it's initially entered my viewport. All that I care about is when I scroll down, when my scroll position hits the starting point of the waypoint, THEN my trigger activates.

[jamesplease]

Gotcha. Looking at that code, it looks like that should work to me. Does that work, or no? Or is the issue that you think it’s messy code?

Also, for triggers when the waypoint reaches the top of the screen, there’s no difference between using children or not. So if that’s the part that bugs you you can just get rid of the children.

[lightninglu10]

@jmeas Unless I'm understanding this library incorrectly, I don't think I've left the waypoint until my scroll hits the bottom of the waypoint. So onLeave won't trigger unless the waypoint is out of the view port. Not really the intended behavior.

I guess I could apply the waypoint to the container above, and then once it leaves, then the trigger will be active, but that seems counter intuitive to what I'm trying to do which is set an active section.

[jamesplease]

Ah, makes sense. @lightninglu10 . Try a Waypoint without children?

import { Component } from 'react';
import Waypoint from 'react-waypoint';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <div>
          .. (stuff here)
         </div>
        <Waypoint onLeave={this.onLeave}/>
        <div some stuff in this div />
        <div some stuff in this div />
        <div some stuff in this div />
    );
  }
  
  onLeave = ({ currentPosition, previousPosition }) => {
    const isAbove = currentPosition === Waypoint.above;
    const wasInside = previousPosition === Waypoint.inside;
    if (isAbove && wasInside) {
      console.log('Alright!');
    }
  }
}

In general, I rarely use Waypoints with children. They're useful for a specific case (described in the README), but in my experience I'd recommend most folks try using a Waypoint without children first, even when the Waypoint happens to be associated with a "section" on the page.

[jamesplease]

@lightninglu10 , it's been a few days, so I thought I'd follow up. How are things lookin' over there?
Were you able to give it a try without children? :)

[jamesplease]

I’m going to close this out since it’s been a few weeks without any updates. Unless I’m missing something obvious, I think this use case is supported well when using a Waypoint without children. @lightninglu10 if you’re still running into issues, leave a comment here, and I’d be happy to reopen this and continue the convo! ✌️

[lightninglu10]

Hey sorry @jmeas I ended up making my own waypoint style thing to do this. I think waypoints should be able to do it but would have to use a different style of thinking that I didn't want to.

[jamesplease]

No worries. I’m glad you found a solution that works for you! 👌

[rahulrsingh09]

Hey sorry @jmeas I ended up making my own waypoint style thing to do this. I think waypoints should be able to do it but would have to use a different style of thinking that I didn't want to.

Hey @lightninglu10 Can you please help me with this same thing i am also looking at a similar solution where i am not bothered about the element in View Port but only when it hits a particular point.. I will be glad if you can give some thoughts on this or a snippet.

[rahulrsingh09]

@lightninglu10 I have tried this in a sandbox but i cannot seem to get a hang of this also .. the scrollable ancestor how do we set it was a problem can you please help look at this .. #316