Class not changing on scroll in react

Question

Following is my handleScroll function in which I am trying to add red class if it scroll down to a certain limit else apply blue. However this is only going inside the else statement and also console.log(e.target.scrollTop); its consoling as undefined. Let me know what I am doing wrong here.

Code -

handleScroll(e) {
    console.log(e.target.scrollTop);
    if (window.screenX > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Codesandbox - https://codesandbox.io/s/silly-feynman-m6hp1

any luck on getting this to work? :)

Cat_Enthusiast
– Cat_Enthusiast

2019-06-14 17:50:17 +00:00
Commented Jun 14, 2019 at 17:50 — Cat_Enthusiast
– Cat_Enthusiast, Commented Jun 14, 2019 at 17:50
@ChristopherNgo ahh sorry..my system got crashed..upvoted

Nesh
– Nesh

2019-06-17 08:58:55 +00:00
Commented Jun 17, 2019 at 8:58 — Nesh
– Nesh, Commented Jun 17, 2019 at 8:58
darn I hope you were able to keep all your files :)

Cat_Enthusiast
– Cat_Enthusiast

2019-06-17 09:16:34 +00:00
Commented Jun 17, 2019 at 9:16 — Cat_Enthusiast
– Cat_Enthusiast, Commented Jun 17, 2019 at 9:16

Cat_Enthusiast · Accepted Answer · 2019-06-14 08:06:36Z

I would highly recommend adding an extra check to your condition. When you scroll a single-time, you update your component-state multiple times after a certain range (100), which is unnecessary. You only need to update it once.

It will keep updating because you meet the condition inside handleScroll, even though the background has already changed. The sheer amount of updates can cause your app to crash.

Try something like this it will update your component-state as expected and only when necessary: https://codesandbox.io/s/white-architecture-jepyc

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navBckgroundColor: `blue`,
      altered: false
    };
  }
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  //use arrow function instead so that its "this" keyword points to the component's execution context. Otherwise, "this" will point to the global window object where you cannot use this.setState.
  handleScroll = e => {
    if (window.pageYOffset > 100 && !this.state.altered) {
      this.setState({
        navBckgroundColor: `red`,
        altered: true
      });
    } else if(window.pageYOffset < 100 && this.state.altered) {
      this.setState({
        navBckgroundColor: `blue`,
        altered: false
      });
    }
  };

  render() {
    return (
      <div className="App">
        <Navbar bckGroundColor={this.state.navBckgroundColor} />
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

Shubham Khatri · Accepted Answer · 2019-06-14 05:13:49Z

0

Use window.scrollY instead of window.screenY and also bind the handleScroll method.

handleScroll = (e) => {
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Working demo

answered Jun 14, 2019 at 5:13

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Divesh Panwar · Accepted Answer · 2019-06-14 05:27:56Z

0

Please use

handleScroll = e => {
    console.log(e.target.scrollTop);
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Please see the workable code on :

https://codesandbox.io/s/friendly-swirles-bwl06

also your window.screenX will always output the same value, and thus no change to the colors.

I have changed that in the code as well

edited Jun 14, 2019 at 5:27

answered Jun 14, 2019 at 4:58

Divesh Panwar

1414 bronze badges

Collectives™ on Stack Overflow

Class not changing on scroll in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related