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
– 3Dos, Commented Apr 3, 2018 at 9:50
Possible duplicate of stackoverflow.com/questions/29725828/… — keul
– keul, Commented Apr 3, 2018 at 10:00
Possible duplicate of Update style of a component onScroll in React.js — keul
– keul, Commented Apr 3, 2018 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
– JsNinja, Commented Apr 3, 2018 at 10:05

Mindaugas · Accepted Answer · 2018-04-03 10:46:54Z

1

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>
    );
  }

answered Apr 3, 2018 at 10:46

Mindaugas

1,1835 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JsNinja Over a year ago

componentWillUnmount what is this ? why did you call it?

Mindaugas Over a year ago

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".

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related