ReactJS: Issue with using setState() with onScroll()

Question

I have a React app with basically a fixed header -- <AppHeader> -- and the rest of the content -- <AppMain>. What I'm trying to do is add a drop shadow to the <AppHeader> when the window is scrolled. So I'm attaching an onScroll handler to a DIV around <AppMain>, and when I detect it's scrolled, I set a state variable scrolled, which gets passed to <AppHeader>, and that component can then deal with adding the appropriate drop shadow class. So my code more or less looks like:

class App extends Component {
  _handleScroll(e) {
    console.log('scrolling:', e.target.scrollTop);
    if (e.target.scrollTop > 0) {
      this.setState({ scrolled: true });
    } else {
      this.setState({ scrolled: false });
    }
  }

  constructor(props) {
    super(props);

    this._handleScroll = this._handleScroll.bind(this);
    this.state = {
      scrolled: false
    };
  }

  render() {
    return (
      <div className="App">
        <AppHeader scrolled={this.state.scrolled} />
        <div className="AppMainScroll" onScroll={this._handleScroll}>
          <AppMain />
        </div>
      </div>
    );
  }
}

The above code works well enough, and my <AppHeader> gets the appropriate prop value when the window is scrolled. However, I notice in my console that the _handleScroll() function keeps getting triggered when the div is scrolled, even if I'm not actively scrolling / interacting with the window. As I'm typing this, my console.log() in _handleScroll() has fired 2000 times, and that window isn't even in the foreground. If I scroll all the way back to the top, _handleScroll() no longer gets triggered.

Am I using onScroll and setState incorrectly here?

I'm not sure why this is, but you could try attaching your handler to window directly in componentDidMount (remember to remove the handler in componentWillUnmount). This way you also don't need a wrapper. — John Weisz
– John Weisz, Commented Aug 16, 2017 at 19:12
Is the drop shadow constant? For example, like stack overflows header dropshadow(adds a slight shadow when document top is not 0)? Or does the drop shadow only appear when your literally scrolling. — Dan Zuzevich
– Dan Zuzevich, Commented Aug 16, 2017 at 19:45
minor comment but you can replace your if statement with: this.setState({ scrolled: e.target.scrollTop > 0 }) — azium
– azium, Commented Aug 16, 2017 at 20:10
@DannyDelott I just tried adding lodash's debounce as detailed here, but now the event is firing every 500ms (my debounce timeout), instead of immediately. — accelerate
– accelerate, Commented Aug 16, 2017 at 21:18

byumark · Accepted Answer · 2017-09-22 04:01:45Z

1

I think this is what you're missing.

componentDidMount() {
  window.onscroll = () => this._handleScroll()
}

_handleScroll() {
  console.log('scrolling:', document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 0) {
    this.setState({ scrolled: true });
  } else {
    this.setState({ scrolled: false });
  }
}

https://codesandbox.io/s/nk6o110464

edited Sep 22, 2017 at 4:01

answered Aug 16, 2017 at 21:09

byumark

2981 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

byumark Over a year ago

I just went back to the codesandbox.io link and it didn't work like it did before. After some playing around a bit I found that changing document.body.scrollTop to document.documentElement.scrollTop got it working again. The original code showed 0 and wouldn't change when I scrolled. I've updated the answer and the codesandbox.io.

Collectives™ on Stack Overflow

ReactJS: Issue with using setState() with onScroll()

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related