react-scroll icon indicating copy to clipboard operation
react-scroll copied to clipboard

How can I get notify when one `Element` is scroll out of viewport?

Open wenjoy opened this issue 4 years ago • 3 comments
trafficstars

Per title, I want to do some extra work when the Element is out of viewport. And I don't need Link to display on the screen, so the Link's onSetActive will not help.

wenjoy avatar Jun 29 '21 08:06 wenjoy

There are a few events you could subscripe to.

Begin and End events, you could then detect if your element is outside viewport.

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

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

fisshy avatar Jun 29 '21 09:06 fisshy

As I tested, this event only trigger when use scroll method of react-scroll not the scroll of browser. If I understand wrongly, please correct me. What I want to do is notify me when element was scrolled (by mouse or trackpad) out viewport.

wenjoy avatar Jun 29 '21 09:06 wenjoy

Would also like to know. The documentation is vague and the examples not complete.

Rupenieks avatar Nov 11 '21 13:11 Rupenieks