Toggle Class based on scroll React JS

Question

I'm using bootstrap 4 nav bar and would like to change the background color after ig 400px down scroll down. I was looking at the react docs and found a onScroll but couldn't find that much info on it. So far I have...

I don't know if I'm using the right event listener or how to set the height etc.

And I'm not really setting inline styles...

  import React, { Component } from 'react';

   class App extends Component {

   constructor(props) {
    super(props);

      this.state = {  scrollBackground: 'nav-bg' };
      this.handleScroll = this.handleScroll.bind(this);
   }


   handleScroll(){
      this.setState ({
         scrollBackground: !this.state.scrollBackground
       })
    }

 render() {
 const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg';

 return (
   <div>

       <Navbar inverse toggleable className={this.state.scrollBackground} 
                                  onScroll={this.handleScroll}>
        ...
      </Navbar>

    </div>
   );
  }
}

export default App;

Possible duplicate of [Update style of a component onScroll in React.js](https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js) — gurch101, Jun 18 '17 at 07:02

Pouya Ataei · Answer 1 · 2021-10-25T00:41:07.177

For those of you who are reading this question after 2020, I've taken @glennreyes answer and rewritten it using React Hooks:

  const [scroll, setScroll] = useState(0)

  useEffect(() => {
    document.addEventListener("scroll", () => {
      const scrollCheck = window.scrollY < 100
      if (scrollCheck !== scroll) {
        setScroll(scrollCheck)
      }
    })
  })

Bear in mind that, useState has an array of two elements, firstly the state object and secondly the function that updates it.

Along the lines, useEffect helps us replace componentDidmount, the function written currently does not do any clean ups for brevity purposes.

If you find it essential to clean up, you can just return a function inside the useEffect.

You can read comprehensively here.

UPDATE:

If you guys felt like making it modular and even do the clean up, you can do something like this:

Create a custom hook as below;

import { useState, useEffect } from "react"

export const useScrollHandler = () => {
// setting initial value to true
const [scroll, setScroll] = useState(1)

// running on mount
useEffect(() => {
  const onScroll = () => {
    const scrollCheck = window.scrollY < 10
    if (scrollCheck !== scroll) {
      setScroll(scrollCheck)
    }
  }

// setting the event handler from web API
document.addEventListener("scroll", onScroll)

// cleaning up from the web API
 return () => {
   document.removeEventListener("scroll", onScroll)
  }
}, [scroll, setScroll])

return scroll

}

Call it inside any component that you find suitable:

const component = () => {

// calling our custom hook
const scroll = useScrollHandler()

....... rest of your code

}

I think you might need to put in an example of what `....... rest of your code` would be. What type does useScrollHandler return? A number? A bool? it's not super obvious, and then how do you use that data to make something appear or dissappear? — Sam, May 15 '20 at 23:56

score 33 · Accepted Answer · edited May 03 '18 at 22:01

One way to add a scroll listener is to use the componentDidMount() lifecycle method. Following example should give you an idea:

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  state = {
    isTop: true,
  };

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < 100;
      if (isTop !== this.state.isTop) {
          this.setState({ isTop })
      }
    });
  }
  render() {
    return (
      <div style={{ height: '200vh' }}>
        <h2 style={{ position: 'fixed', top: 0 }}>Scroll {this.state.isTop ? 'down' : 'up'}!</h2>
      </div>
    );
  }
} 

render(<App />, document.getElementById('root'));

This changes the Text from "Scroll down" to "Scroll up" when your scrollY position is at 100 and above.

Edit: Should avoid the overkill of updating the state on each scroll. Only update it when the boolean value changes.

thanks Glenn, that worked thanks, i modified it to my code incase anyone ever has the same questions `` — Fernando B, Jun 18 '17 at 16:09
I have this warning after adding this code: `Warning: setState(...): Can only update a mounted or mounting component.` — amirhossein693, Apr 04 '18 at 18:55

score 7 · Answer 3 · answered Jul 02 '20 at 18:08

7

 const [scroll, setScroll] = useState(false);

 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
   });
 }, []);

Then you can change your class or anything according to scroll.

<nav className={scroll ? "bg-black" : "bg-white"}>...</nav>

answered Jul 02 '20 at 18:08

Basanta Kc

245
4
5

Thanks it is easy to use – ZiaUllahZia Sep 27 '20 at 18:56

score 5 · Answer 4 · answered Apr 04 '18 at 19:01

It's Better

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      isTop: true
    };
    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < 100;
      if (isTop !== this.state.isTop) {
        this.onScroll(isTop);
      }
    });
  }

  onScroll(isTop) {
    this.setState({ isTop });
  }

  render() {
    return (
      <div style={{ height: '200vh' }}>
        <h2 style={{ position: 'fixed', top: 0 }}>Scroll {this.state.isTop ? 'down' : 'up'}!</h2>
      </div>
    );
  }
} 

render(<App />, document.getElementById('root'));

because you should not use setState method in componentDidMount hook according to ReactJS Document. — amirhossein693, Jun 12 '19 at 20:43

score 1 · Answer 5 · edited Oct 29 '20 at 11:17

I have changed @PouyaAtaei answer a bit for my use case.

import { useState, useEffect } from "react"

// Added distance parameter to determine how much 
// from the top tell return value is updated.
// The name of the hook better reflects intended use.
export const useHasScrolled = (distance = 10) => {

  // setting initial value to false
  const [scroll, setScroll] = useState(false)

  // running on mount
  useEffect(() => {
    const onScroll = () => {
    // Logic is false tell user reaches threshold, then true after.
      const scrollCheck = window.scrollY >= distance;
      if (scrollCheck !== scroll) {
        setScroll(scrollCheck)
      }
    }

    // setting the event handler from web API
    document.addEventListener("scroll", onScroll)

    // cleaning up from the web API
    return () => {
      document.removeEventListener("scroll", onScroll)
    }

  }, [scroll, setScroll])

  return scroll
}

Calling the hook:

const component = () => {
  // calling our custom hook and optional distance agument.
  const scroll = useHasScrolled(250)
}

score 1 · Answer 6 · answered Nov 14 '19 at 10:28

This is yet another take / my take on hooks approach for on scroll displaying and hiding of a random page element.

I have been very much inspired from: Dan Abramov's post here.

You can check a full working example, in this CodeSandbox demo.

The following is the code for the useScroll custom hook:

import React, { useState, useEffect } from "react";

export const useScroll = callback => {
  const [scrollDirection, setScrollDirection] = useState(true);

  const handleScroll = () => {
    const direction = (() => {
      // if scroll is at top or at bottom return null,
      // so that it would be possible to catch and enforce a special behaviour in such a case.
      if (
        window.pageYOffset === 0 ||
        window.innerHeight + Math.ceil(window.pageYOffset) >=
          document.body.offsetHeight
      )
        return null;
      // otherwise return the direction of the scroll
      return scrollDirection < window.pageYOffset ? "down" : "up";
    })();

    callback(direction);
    setScrollDirection(window.pageYOffset);
  };

  // adding and cleanning up de event listener
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  });
};

And this hook will be consumed like this:

  useScroll(direction => {
    setScrollDirection(direction);
  });

A full component using this custom hook:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import CustomElement, { useScroll } from "./element";
import Scrollable from "./scrollable";

function Page() {
  const [scrollDirection, setScrollDirection] = useState(null);

  useScroll(direction => {
    setScrollDirection(direction);
  });

  return (
    <div>
      {/* a custom element that implements some scroll direction behaviour */}
      {/* "./element" exports useScroll hook and <CustomElement> */}
      <CustomElement scrollDirection={scrollDirection} />
      {/* just a lorem ipsum long text */}
      <Scrollable />
    </div>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.render(<Page />, rootElement);

And lastly the code for CustomElement:

import React, { useState, useEffect } from "react";

export default props => {
  const [elementVisible, setElementVisible] = useState(true);
  const { scrollDirection } = props;

  // when scroll direction changes element visibility adapts, but can do anything we want it to do
  // U can use ScrollDirection and implement some page shake effect while scrolling
  useEffect(() => {
    setElementVisible(
      scrollDirection === "down"
        ? false
        : scrollDirection === "up"
        ? true
        : true
    );
  }, [scrollDirection]);

  return (
    <div
      style={{
        background: "#ff0",
        padding: "20px",
        position: "fixed",
        width: "100%",
        display: `${elementVisible ? "inherit" : "none"}`
      }}
    >
      element
    </div>
  );
};

score 0 · Answer 7 · answered Jul 22 '20 at 12:56

These are two hooks - one for direction (up/down/none) and one for the actual position

Use like this:

useScrollPosition(position => {
    console.log(position)
  })

useScrollDirection(direction => {
    console.log(direction)
  })

Here are the hooks:

import { useState, useEffect } from "react"

export const SCROLL_DIRECTION_DOWN = "SCROLL_DIRECTION_DOWN"
export const SCROLL_DIRECTION_UP = "SCROLL_DIRECTION_UP"
export const SCROLL_DIRECTION_NONE = "SCROLL_DIRECTION_NONE"

export const useScrollDirection = callback => {
  const [lastYPosition, setLastYPosition] = useState(window.pageYOffset)
  const [timer, setTimer] = useState(null)

  const handleScroll = () => {
    if (timer !== null) {
      clearTimeout(timer)
    }
    setTimer(
      setTimeout(function () {
        callback(SCROLL_DIRECTION_NONE)
      }, 150)
    )
    if (window.pageYOffset === lastYPosition) return SCROLL_DIRECTION_NONE

    const direction = (() => {
      return lastYPosition < window.pageYOffset
        ? SCROLL_DIRECTION_DOWN
        : SCROLL_DIRECTION_UP
    })()

    callback(direction)
    setLastYPosition(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

export const useScrollPosition = callback => {
  const handleScroll = () => {
    callback(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

score 0 · Answer 8 · answered Mar 22 '21 at 12:11

how to fix :

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. MenuNews

const [scroll, setScroll] = useState(false);

 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > specify_height_you_want_to_change_after_here);
   });
 }, []);

score 0 · Answer 9 · answered Jun 03 '21 at 20:07

Approach without scroll event listener

import { useEffect, useState } from "react";

interface Props {
  elementId: string;
  position: string;
}

const useCheckScrollPosition = ({ elementId, position }: Props) => {
  const [isOverScrollPosition, setIsOverScrollPosition] = useState<boolean>(false);

  useEffect(() => {
    if (
      "IntersectionObserver" in window &&
      "IntersectionObserverEntry" in window &&
      "intersectionRatio" in window.IntersectionObserverEntry.prototype
    ) {
      const observer = new IntersectionObserver((entries) => {
        setIsOverScrollPosition(entries[0].boundingClientRect.y < 0);
      });
      const flagElement = document.createElement("div");
      flagElement.id = elementId;
      flagElement.className = "scroll-flag";
      flagElement.style.top = position;

      const container = document.getElementById("__next"); // React div id
      const oldFlagElement = document.getElementById(elementId);

      if (!oldFlagElement) container?.appendChild(flagElement);

      const elementToObserve = oldFlagElement || flagElement;
      observer.observe(elementToObserve);
    }
  }, [elementId, position]);

  return isOverScrollPosition;
};

export default useCheckScrollPosition;

and then you can use it like this:

const isOverScrollPosition = useCheckScrollPosition({
    elementId: "sticky-header",
    position: "10px",
  });

isOverScrollPosition is a boolean that will be true if you scroll over position provided value (10px) and false if you scroll below it.

This approach will add a flag div in react root.

Reference: https://css-tricks.com/styling-based-on-scroll-position/

Toggle Class based on scroll React JS

9 Answers9

The following is the code for the useScroll custom hook:

And this hook will be consumed like this:

A full component using this custom hook:

And lastly the code for CustomElement:

Linked