Skip to content

Instantly share code, notes, and snippets.

@jaf7
Forked from agm1984/reactScrollPositionY.js
Created February 15, 2019 19:47
Show Gist options
  • Save jaf7/da66384aad8df5328f841f6c2ac386ba to your computer and use it in GitHub Desktop.
Save jaf7/da66384aad8df5328f841f6c2ac386ba to your computer and use it in GitHub Desktop.
How to get Y scroll position in React
import React, { Component } from 'react'
import UserDetails from './UserDetails'
/**
* This utility function allows function calls to be debounced.
* @param {Function} func Function that requires debouncing
* @param {Number} wait Wait time in milliseconds between successive invocations
*/
const debounce = (func, wait) => {
let timeout
return (...args) => {
clearTimeout(timeout)
timeout = setTimeout(() => func.apply(this, args), wait)
}
}
class NavContainer extends Component {
constructor(props) {
super(props)
this.state = {
scrollPositionY: 0,
}
}
componentDidMount() {
// 32 is the number of milliseconds to debounce
// I picked this because it's approx 2 frames (ie: 16.7 * 2)
return window.addEventListener('scroll', debounce(this.handleScroll, 32))
}
componentWillUnmount() {
return window.removeEventListener('scroll', debounce(this.handleScroll, 32))
}
handleScroll = () => {
// + is unary operator, same as Number(scrollPositionY)
const scrollPositionY = +window.scrollY
return this.setState({ scrollPositionY })
}
render() {
// !! coerces value to be a Boolean
// we want it to be true or false (true if scrollPositionY > 0)
// it works because scrollPositionY === 0 is falsy
const isScrolling = !!this.state.scrollPositionY
return (
<div className={(isScrolling) ? 'nav isScrolling' : 'nav'}>
<UserDetails isScrolling={isScrolling} />
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment