Skip to content

Instantly share code, notes, and snippets.

@dineshkp-dev
Forked from koistya/App.js
Created January 1, 2020 10:25
Show Gist options
  • Save dineshkp-dev/8c9d29698e167c6c423b4734f89c840e to your computer and use it in GitHub Desktop.
Save dineshkp-dev/8c9d29698e167c6c423b4734f89c840e 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