Skip to content

Instantly share code, notes, and snippets.

@koistya
Last active June 8, 2022 09:55
Show Gist options
  • Save koistya/934a4e452b61017ad611 to your computer and use it in GitHub Desktop.
Save koistya/934a4e452b61017ad611 to your computer and use it in GitHub Desktop.
How to add `onscroll` event in ReactJS component
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll, true);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
nav = React.createRef();
handleScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.nav.current.style.top = `${lastScrollY}px`;
ticking = false;
});
ticking = true;
}
};
render() {
return (
<div>
<nav ref={this.nav}>
</nav>
<div>
);
}
}
export default App;
@LyzioOh
Copy link

LyzioOh commented Oct 29, 2017

Hi @j6k4m8 , this.handleScroll = this.handleScroll.bind(this); Work very well with the traditionnal method declaration Syntax

constructor(props) {
  super(props);
  this.handleScroll = this.handleScroll.bind(this);
}
handleScroll(event) {
  console.log('the scroll things', event)
};

In case you're interested by making you're constructor more dry you could also use the ES6 fat arrow syntax.

constructor(props) {
  super(props);
}
handleScroll = (event) =>  {
  console.log('the scroll things', event)
};

Fat arrow automatically bind this to the method, allowing shorter constructor. Especially when you have a lot of methods.

@mehmetnyarar
Copy link

@jylopez, worked for me too, thanks!

@hnoor
Copy link

hnoor commented Mar 14, 2018

@jylopez worked perfectly for me. thank you so much!

@Lynn0108
Copy link

@ffxsam your solution works for me ~thank you a lot

@billyma128
Copy link

componentDidMount() {
    // $FlowFixMe
    const node = this.hscroll;
    if (node) {
      node.addEventListener('scroll', e => {
        window.requestAnimationFrame(() => {
          this.setState({ fixed: node.scrollTop > 10 });
        });
      });
    }
  }

componentWillUnmount() {
    // $FlowFixMe
    this.hscroll.removeEventListener('scroll');
  }

render() {
    return (
      // $FlowFixMe
      <Container innerRef={comp => (this.hscroll = comp)}>

@a-m-dev
Copy link

a-m-dev commented Aug 20, 2018

this is my solution :

componentDidMount = () => {
   // hadling cover parallax 
    window.addEventListener('scroll', this.handleOnScroll)
}

componentWillUnmount = () => {
    window.removeEventListener('scroll', this.handleOnScroll)
}

// handle onScroll event
handleOnScroll = () => {
    // console.log(this.coverRef.current.height)
    const wScroll = window.scrollY
    this.coverGradRef.current.style.cssText = `transform: translate(0px , -${wScroll/40}%)`
    // console.log(window.scrollY)
}

coverGradRef is a ref that is in my component's constructor and i pass that to child component, it works pretty smooth so far

and one more thing
after this.coverGradRef.current.style you can add cssText and add what every property you want like pure css , if you don't like that you can use something like this.coverGradRef.current.style.top = '10px' and instead of top you can put any valid css property

@vishma9
Copy link

vishma9 commented Sep 12, 2018

componentDidMount(){
document.addEventListener('scroll', this.handleScroll, true);
}
handleScroll = () => {
console.log('scrolling ...');
}

@venoms
Copy link

venoms commented Sep 17, 2018

Note however that input events and animation frames are fired at about the same rate and therefore the optimization below is often unnecessary.

https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Example

@kenadian
Copy link

kenadian commented Sep 26, 2018

Hi @jylopez This is what I needed. Thanks! Appreciated the ES6 tip from @EEtancelin. I like not having to add the bindings in the constructor. Good stuff!

@MarvelMoe
Copy link

Good stuff @jylopez. Has anyone had any issue with the scroll event not firing on mobile. The touchmove event is what native js uses and I see react has onTouchMove but that is react native specific.

@avatar31
Copy link

avatar31 commented Nov 3, 2018

@jylopez Thank you so much.. it is working fine

@Mazuh
Copy link

Mazuh commented Jan 9, 2019

@ffxsam solution worked fine for me too.

@didiraja
Copy link

@jylopez @EEtancelin best solutions, thx!

@victorpunkd
Copy link

solved my problem thanks

@paintedbicycle
Copy link

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

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

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

@dp21g
Copy link

dp21g commented Feb 18, 2019

@paintedbicycle thank you! now it works.

@jerzabek
Copy link

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

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

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Worked for me!

@thedanheller
Copy link

window.addEventListener('scroll', this.handleScroll, true);

Thanks!

@sovietski
Copy link

sovietski commented Jun 6, 2019

@paintedbicycle Thank you!! This worked for me

@miguelespinoza
Copy link

miguelespinoza commented Jun 10, 2019

Thanks this is exactly what I needed to do for a ShadowDOM supported div that used onScroll.
Turns out ShadowDOM does not support scroll listener, it's essentially blocked.

What I did was:

const listNode = ReactDOM.findDOMNode(this.list);
listNode.addEventListener('scroll', this.handleScroll);

and it worked! 🎉

@sushantlp
Copy link

If anyone is thinking they are going crazy that it's not working for them, while everyone else is piling on saying it does, try this:

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

Note, the third argument of "true".

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Worked for me

@Jesse-efe
Copy link

thank you very much @paintedbicycle

@raheemazeezabiodun
Copy link

This worked for me:

constructor(props) {
  super(props);
  this.handleScroll = this.handleScroll.bind(this);
}

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

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

handleScroll(event) {
  console.log('the scroll things', event)
};

your solution worked for me. Thank you for this

@koistya
Copy link
Author

koistya commented Aug 4, 2020

@raheemazeezabiodun Note, that if you use an arrow function syntax for declaring custom handlers, you won't need to bind them to this inside of a constructor function:

constructor(props) {
  supert(props);
  this.handleScroll = this.handleScroll.bind(this);
}

handleScroll(event) { ... };

vs

handleScroll = (event) => { ... };

@Random-Black-Coder
Copy link

Is anyone having issues with the event returning as undefined?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment