Alejandro Pérez Alejandro Pérez - 1 year ago 250
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

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
in the state of the component and call
in the scroll callback, however, this makes scrolling unusable as this is terribly slow.

Any suggestion on how to do this?


Answer Source

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

      transform: itemTranslate
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download