how to toggle class on scroll event in react?

Question

I need to add or remove class on element if page is scrolled in react I wrote such a code to track page scroll:

export default class TestComponenet extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      scrolled: false
    }
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  };

  handleScroll(event) {
    this.setState({srolled: true});
  };

  render() {
    return (
      <div className ={scrolled ? 'scrolling' : ''}></div>
    );
  }
}

but I can only track scroll but I cannot toggle class dynamically.

Your question is very vague. Do you think you could elaborate a bit, and also maybe show your entire component? — Tholle
– Tholle, Commented Jun 25, 2018 at 18:13

Tholle · Accepted Answer · 2018-07-05 18:05:02Z

There is no real "scroll state" in the browser. You get an event when the user scrolled, and then it's over. You could keep a timeout that will set it to not scrolling if the user hasn't scrolled in a while:

Example

class App extends React.Component {
  state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = event => {
    this.setState({ scrolled: true });

    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.setState({ scrolled: false });
    }, 200);
  };

  render() {
    const { scrolled } = this.state;

    return (
      <div
        className={scrolled ? "scrolling" : ""}
        style={{
          width: 200,
          height: 1000,
          backgroundColor: scrolled ? "blue" : "red"
        }}
      />
    );
  }
}

Collectives™ on Stack Overflow

how to toggle class on scroll event in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related