How can i call my function on scroll event in react.js?

Question

Hello everybody i have a question i'm on reactjs i did create a class named Storymap and then i created a function that scrolls 2 divs at the same time

for example and the scroll is in the bot div 'the second div'

  Scrolling = () => {
    var isSyncingLeftScroll = false,
      isSyncingRightScroll = false,
      leftDiv = document.getElementById('top'),
      rightDiv = document.getElementById('bot');

    leftDiv.onscroll = () => {
      if (!isSyncingLeftScroll) {
        isSyncingRightScroll = true;
        rightDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingLeftScroll = false;
    };

    rightDiv.onscroll = () => {
      if (!isSyncingRightScroll) {
        isSyncingLeftScroll = true;
        leftDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingRightScroll = false;
    };
  }

and i call it like that

<div className="divdeux" id="bot" onScroll={this.Scrolling}>

but it doesn't work !!! for me Thanks to anyone who takes time to review and give feedback.

Have you tried to use `ref` to access your DOM nodes instead of `document.getElementById` ? — 3Dos, Apr 03 '18 at 09:50
Possible duplicate of https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js — keul, Apr 03 '18 at 10:00
Possible duplicate of [Update style of a component onScroll in React.js](https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js) — keul, Apr 03 '18 at 10:00
@3Dos instead of id i put ref ='top' and ref ='bot' in each div and then i call it var leftDiv = $('#top'); for example ? — JsNinja, Apr 03 '18 at 10:05

score 1 · Answer 1 · answered Apr 03 '18 at 10:46

Something like this should do the job:

  componentDidMount() {
    this.refContainer.addEventListener('scroll', this.onScroll);
  }

  componentWillUnmount() {
    this.refContainer.removeEventListener('scroll', this.onScroll);
  }

  onScroll = () => {
    var isSyncingLeftScroll = false,
      isSyncingRightScroll = false,
      leftDiv = document.getElementById('top'),
      rightDiv = document.getElementById('bot');

    leftDiv.onscroll = () => {
      if (!isSyncingLeftScroll) {
        isSyncingRightScroll = true;
        rightDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingLeftScroll = false;
    };

    rightDiv.onscroll = () => {
      if (!isSyncingRightScroll) {
        isSyncingLeftScroll = true;
        leftDiv.scrollLeft = this.scrollLeft;
      }
      isSyncingRightScroll = false;
    };
  }

  ...

  render() {
    return (
      <div
        className="divdeux"
        id="bot"
        ref={ref => {
          this.refContainer = ref;
        }}
      >
        {/* whatever you have in the div */}
      </div>
    );
  }

You need to remove eventListeners on unmount, this is recommended. I think react should even give warnings when you forget that. It is basic memory management, if your component is unmounted - the event listener doesn't get removed automatically, you need to do that manually. There is a bunch of approuches towards this boilerplatish situation, just google "remove/unbind on react component unmount". — Mindaugas, Apr 03 '18 at 12:13

How can i call my function on scroll event in react.js?

1 Answers1