Update style of a component onScroll in React js

Question

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 render method looks like this       function          let style     transform   translateY 0px             window addEventListener  scroll    event    gt           let scrollTop   event srcElement body scrollTop             itemTranslate   Math min 0  scrollTop 3 - 60            style transform    translateY     itemTranslate    px                     return           lt div style  style  gt  lt  div gt                    This doesn t work because React doesn t know that the component has changed  and therefore the component is not rerendered     I ve tried storing the value of itemTranslate in the state of the component  and calling setState in the scroll callback  However  this makes scrolling unusable as this is terribly slow     Any suggestion on how to do this

User · Answer

My bet here is using Function components with new hooks to solve it, but instead of using useEffect like in previous answers, I think the correct option would be useLayoutEffect for an important reason:

The signature is identical to useEffect, but it fires synchronously after all DOM mutations.

This can be found in React documentation. If we use useEffect instead and we reload the page already scrolled, scrolled will be false and our class will not be applied, causing an unwanted behavior.

An example:

import React, { useState, useLayoutEffect } from "react"

const Mycomponent = (props) => {
  const [scrolled, setScrolled] = useState(false)

  useLayoutEffect(() => {
    const handleScroll = e => {
      setScrolled(window.scrollY > 0)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  ...

  return (
    <div className={scrolled ? "myComponent--scrolled" : ""}>
       ...
    </div>
  )
}

A possible solution to the problem could be https://codepen.io/dcalderon/pen/mdJzOYq

const Item = (props) => { 
  const [scrollY, setScrollY] = React.useState(0)

  React.useLayoutEffect(() => {
    const handleScroll = e => {
      setScrollY(window.scrollY)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <div class="item" style={{'--scrollY': `${Math.min(0, scrollY/3 - 60)}px`}}>
      Item
    </div>
  )
}

User · Answer

constructor         super         this state             change  false                componentDidMount         window addEventListener  scroll   this handleScroll       console log  add event           componentWillUnmount         window removeEventListener  scroll   this handleScroll       console log  remove event           handleScroll   e   gt        if  window scrollY     0          this setState   change  false           else if  window scrollY  gt  0           this setState   change  true                render     return    lt div className  quot main quot  style    boxShadow  this state change   0px 6px 12px rgba 3 109 136 0 14  none    gt  lt  div gt  This is how I did it and works perfect

User · Answer

My solution for making a responsive navbar   position   relative  when not scrolling and fixed when scrolling and not at the top of the page   componentDidMount         window addEventListener  scroll   this handleScroll      componentWillUnmount         window removeEventListener  scroll   this handleScroll     handleScroll event        if  window scrollY     0  amp  amp  this state scrolling     true            this setState  scrolling  false              else if  window scrollY     0  amp  amp  this state scrolling     true            this setState  scrolling  true                 lt Navbar             style   color    06DCD6   borderWidth  0  position  this state scrolling    fixed     relative   top  0  width   100vw   zIndex  1            gt    No performance issues for me

User · Answer

If what you re interested in is a child component that s scrolling  then this example might be of help  https   codepen io JohnReynolds57 pen NLNOyO editors 0011  class ScrollAwareDiv extends React Component     constructor props        super props      this myRef   React createRef       this state    scrollTop  0         onScroll        gt         const scrollTop   this myRef current scrollTop      console log  myRef scrollTop    scrollTop         this setState           scrollTop  scrollTop                render         const         scrollTop         this state     return          lt div          ref  this myRef           onScroll  this onScroll           style               border   1px solid black              width   600px              height   100px              overflow   scroll                gt           lt p gt This demonstrates how to get the scrollTop position within a scrollable             react component  lt  p gt           lt p gt ScrollTop is  scrollTop  lt  p gt        lt  div gt

User · Answer

Here is another example using HOOKS fontAwesomeIcon and Kendo UI React    screenshot here  1   1   import   FontAwesomeIcon   from   fortawesome react-fontawesome     const ScrollBackToTop        gt      const  show  handleShow    useState false      useEffect      gt        window addEventListener  scroll        gt          if  window scrollY  gt  1200            handleShow true           else handleShow false               return      gt          window removeEventListener  scroll                        const backToTop        gt        window scroll   top  0  behavior   smooth              return        lt div gt         show  amp  amp           lt div className  backToTop text-center  gt           lt button className  backToTop-btn k-button   onClick       gt  backToTop     gt             lt div className  d-none d-xl-block mr-1  gt Top lt  div gt             lt FontAwesomeIcon icon  chevron-up   gt           lt  button gt         lt  div gt                lt  div gt           export default ScrollBackToTop          1   https   i stack imgur com ZquHI png

User · Answer

with hooks   import React    useEffect  useState   from  react    function MyApp         const  offset  setOffset    useState 0      useEffect      gt        window onscroll        gt          setOffset window pageYOffset                     console log offset

User · Answer

I found that I can t successfully add the event listener unless I pass true like so   componentDidMount        gt        window addEventListener  scroll   this handleScroll  true

User · Answer

I solved the problem via using and modifying CSS variables  This way I do not have to modify the component state which causes performance issues   index css   root     --navbar-background-color  rgba 95 108 255 1       Navbar jsx  import React    Component   from  react   import styles from    Navbar module css    class Navbar extends Component        documentStyle   document documentElement style      initalNavbarBackgroundColor    rgba 95  108  255  1        scrolledNavbarBackgroundColor    rgba 95  108  255   7         handleScroll        gt            if  window scrollY     0                this documentStyle setProperty  --navbar-background-color   this initalNavbarBackgroundColor             else               this documentStyle setProperty  --navbar-background-color   this scrolledNavbarBackgroundColor                        componentDidMount             window addEventListener  scroll   this handleScroll              componentWillUnmount             window removeEventListener  scroll   this handleScroll              render              return                lt nav className  styles Navbar  gt                   lt a href     gt Home lt  a gt                   lt a href   about  gt About lt  a gt               lt  nav gt                       export default Navbar    Navbar module css   Navbar       background  var --navbar-background-color

User · Answer

An example using classNames  React hooks useEffect  useState and styled-jsx   import classNames from  classnames  import   useEffect  useState   from  react   const Header       gt      const   scrolled  setScrolled     useState     const classes   classNames  header         scrolled  scrolled         useEffect     gt        const handleScroll       gt           if  window pageYOffset  gt  1            setScrolled true          else           setScrolled false                    window addEventListener  scroll   handleScroll      return     gt          window removeEventListener  scroll   handleScroll                   return        lt header className  classes  gt         lt h1 gt Your website lt  h1 gt         lt style jsx gt             header             transition  background-color  2s                     header scrolled             background-color  rgba 0  0  0   1                      lt  style gt       lt  header gt        export default Header

User · Answer

You can pass a function to the onScroll event on the React element  https   facebook github io react docs events html ui-events   lt ScrollableComponent  onScroll  this handleScroll    gt    Another answer that is similar  https   stackoverflow com a 36207913 1255973

User · Answer

To expand on  Austin s answer  you should add this handleScroll   this handleScroll bind this  to your constructor   constructor props       this handleScroll   this handleScroll bind 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        this setState         transform  itemTranslate                  This gives handleScroll   access to the proper scope when called from the event listener    Also be aware you cannot do the  bind this  in the addEventListener or removeEventListener methods because they will each return references to different functions and the event will not be removed when the component unmounts

User · Answer

Update for an answer with React Hooks These are two hooks - one for direction up down none  and one for the actual position Use like this  useScrollPosition position   gt        console log position        useScrollDirection direction   gt        console log direction        Here are the hooks  import   useState  useEffect   from  quot react quot   export const SCROLL DIRECTION DOWN    quot SCROLL DIRECTION DOWN quot  export const SCROLL DIRECTION UP    quot SCROLL DIRECTION UP quot  export const SCROLL DIRECTION NONE    quot SCROLL DIRECTION NONE quot   export const useScrollDirection   callback   gt      const  lastYPosition  setLastYPosition    useState window pageYOffset    const  timer  setTimer    useState null     const handleScroll        gt        if  timer     null          clearTimeout timer            setTimer        setTimeout function              callback SCROLL DIRECTION NONE           150            if  window pageYOffset     lastYPosition  return SCROLL DIRECTION NONE      const direction         gt          return lastYPosition  lt  window pageYOffset           SCROLL DIRECTION DOWN           SCROLL DIRECTION UP               callback direction      setLastYPosition window pageYOffset         useEffect      gt        window addEventListener  quot scroll quot   handleScroll      return      gt  window removeEventListener  quot scroll quot   handleScroll          export const useScrollPosition   callback   gt      const handleScroll        gt        callback window pageYOffset         useEffect      gt        window addEventListener  quot scroll quot   handleScroll      return      gt  window removeEventListener  quot scroll quot   handleScroll

User · Answer

Function component example using useEffect   Note  You need to remove the event listener by returning a  clean up  function in useEffect  If you don t  every time the component updates you will have an additional window scroll listener   import React    useState  useEffect   from  react   const ScrollingElement        gt      const  scrollY  setScrollY    useState 0      function logit         setScrollY window pageYOffset          useEffect      gt        function watchScroll           window addEventListener  scroll   logit             watchScroll           Remove listener  like componentWillUnmount      return      gt          window removeEventListener  scroll   logit                       return        lt div className  App  gt         lt div className  fixed-center  gt Scroll position   scrollY px lt  div gt       lt  div gt

User · Answer

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        this setState         transform  itemTranslate

User · Answer

to help out anyone here who noticed the laggy behavior   performance issues when using Austins answer  and wants an example using the refs mentioned in the comments  here is an example I was using for toggling a class for a scroll up   down icon   In the render method    lt i ref   ref    gt  this scrollIcon   ref  className  fa fa-2x fa-chevron-down  gt  lt  i gt    In the handler method   if  this scrollIcon     null      if    document  scrollTop       window  height     2   gt      body   height     2          this scrollIcon  attr  class    fa fa-2x fa-chevron-up       else        this scrollIcon  attr  class    fa fa-2x fa-chevron-down            And add   remove your handlers the same way as Austin mentioned   componentDidMount      window addEventListener  scroll   this handleScroll      componentWillUnmount      window removeEventListener  scroll   this handleScroll        docs on the refs

[javascript] Update style of a component onScroll in React.js

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components