Update style of a component onScroll in React.js

by

I have built a component in React which is supposed to update its own style on window scroll to create a parallax effect.

The component render method looks like this:

  function() {
    let style = { transform: 'translateY(0px)' };

    window.addEventListener('scroll', (event) => {
      let scrollTop = event.srcElement.body.scrollTop,
          itemTranslate = Math.min(0, scrollTop/3 - 60);

      style.transform = 'translateY(' + itemTranslate + 'px)');
    });

    return (
      <div style={style}></div>
    );
  }

This doesn’t work because React doesn’t know that the component has changed, and therefore the component is not rerendered.

I’ve tried storing the value of itemTranslate in the state of the component, and calling setState in the scroll callback. However, this makes scrolling unusable as this is terribly slow.

Any suggestion on how to do this?

17 Answers
17

Leave a Comment