在 Chrome 中的窗口停止滚动之前，滚动事件不会触发

Question

我有一个附加到组件中的窗口的滚动事件。我想控制台记录页面的滚动位置。但是，如果我快速移动滚动条，我只会在停止在 Chrome 中滚动时获得控制台日志。这是我的组件：

  import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

export class HeroImage extends Component {
  constructor(props) {
     super(props);
      this.handleScroll = this.handleScrollAnimation.bind(this);
   }


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

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

  handleScrollAnimation() {
    // const heroImage = this.HeroImage;
    console.log('here');
    const doc = document.documentElement;
    const scrollPosition = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    console.log(scrollPosition);
    // heroImage.style.backgroundPosition = '50% 0';
    // const animationCopy = this.AnimationCopy;
    // if (this.isElementInViewport(animationTitle)) {
    //   animationTitle.classList.add('animated');
    // }
    // if (this.isElementInViewport(animationCopy)) {
    //   animationCopy.classList.add('animated');
    // }
  }

  render() {
    const styles = {
      heroImage: {
        backgroundImage: `url(${this.props.image})`
      }
    };
    return (
      <section className="hero-image">
        <div
          ref={c => {
            this.HeroImage = c;
          }}
          style={styles.heroImage}
          className="hero-image-bg"
          />
        <div className="hero-image-content-container">
          <div className="hero-image-content">
            <div className="corners corners-top-left"/>
            <div className="corners corners-bottom-left"/>
            <div className="corners corners-top-right"/>
            <div className="corners corners-bottom-right"/>
            <h1>{this.props.title}</h1>
          </div>
        </div>
      </section>
    );
  }
}

HeroImage.propTypes = {
  title: PropTypes.string,
  image: PropTypes.string
};

这是我在页面上调用组件的方式：

<HeroImage image={this.state.heroImage} title={this.state.title}/>

我在谷歌上搜索了很多，我找不到答案。我确定这只是一个小改动，但我需要将滚动事件移动到页面吗？这对我来说听起来不对。

Answer 1

我只是根据我在工作项目中所做的一些事情把这个示例放在一起。在这段代码 sn-p 中，滚动事件会在您滚动时触发，而不仅仅是在您完成后触发。

import React, { Component } from 'react';
import './App.css';
import {findDOMNode} from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      stuff: []
    }
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    let stuff = this.state.stuff;
    for(let i = 0; i < 250; i++) {
      stuff.push(i);
    }
    this.setState({stuff});
    window.addEventListener('scroll', this.handleScroll);
  }

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

  handleScroll() {
    let node = findDOMNode(this);
    let dimensions = node.getBoundingClientRect();
    console.log(dimensions);
  }

  createRow(s, i) {
    return (
      <h1 key={i}>Foo</h1>
    )
  }

  render() {
    return (
      <div className="App">
       {this.state.stuff.map((s, i) => this.createRow(s, i))}
      </div>
    );
  }
}

export default App;

我不完全确定我是否理解你的代码和我的代码之间的区别，但这应该适合你。