fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.36k stars 437 forks source link

Get the Element Name in viewport when scrolling page #428

Open Filippinifra opened 4 years ago

Filippinifra commented 4 years ago

I'm tryng to create a "scroll spy" effect. The problem is I don't want to use the "Link" component, because my menu work in another way and when I click on menu's item the browser open a new page, and I want to have feedback of what Element I'm watching in the viewport. So there is an api that helps me to know in every moment which element I'm watching on viewport? For example

`

const myComponent = () => {

    const elementWatching = scrollSpy.actualElement;

    return (
       <>
          <Element name="one">
             ...
          </Element>
          <Element name="two">
          ...
          </Element>
          <Element name="three">
             ...
          </Element>
          I'm watching this element: {elementWatching}
       </>
    }
}

`

Thanks, Francesco

fisshy commented 4 years ago

Hello!

Currently no support for that.

You could add "onSetActive" and "onSetInactive" events on the scroll action.

You could also register global events.

Events.scrollEvent.register('end', function(to, element) { console.log("end", to, element); });