Skip to content

Instantly share code, notes, and snippets.

@krmao
Forked from koistya/App.js
Created June 8, 2022 09:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krmao/0b020b60312b0675420ff7a16c11d224 to your computer and use it in GitHub Desktop.
Save krmao/0b020b60312b0675420ff7a16c11d224 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment