Alejandro Pérez Alejandro Pérez - 2 months ago 52
React JSX Question

Update style of a component onScroll in React.js

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 for hence the component is not rerendered.

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

Any suggestion on how to do this?

Thanks.

Answer

You should bind the listener in componentDidMount, that way it's only created once. You should be able to store the style in state, the listener was probably the cause of performance issues.

Something like this:

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},