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

我有一个滚动事件附加到组件中的窗口。我想用控制台记录页面的滚动位置。但是，如果我快速移动滚动条，我只会在停止在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
};

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“lodash”进口；
导出类HEROMAGE扩展组件{
建造师（道具）{
超级（道具）；
this.handleScroll=this.handlescrolanimation.bind（this）；
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScroll，false）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScroll，false）；
}
手语{
//const-hegomage=this.hegomage；
console.log（'here'）；
const doc=document.documentElement；
常量scrollPosition=（window.pageYOffset | | doc.scrollTop）-（doc.clientTop | | 0）；
控制台日志（滚动位置）；
//HeroMage.style.backgroundPosition='50%0'；
//const animationCopy=this.animationCopy；
//if（this.iselementviewport（animationTitle））{
//animationTitle.classList.add（'animated'）；
// }
//if（this.iselementviewport（animationCopy））{
//animationCopy.classList.add（'animated'）；
// }
}
render（）{
常量样式={
英雄法师：{
backgroundImage:`url（${this.props.image}）`
}
};
返回(
{
这个.mage=c；
}}
style={styles.HeroMage}
className=“英雄形象背景”
/>
{this.props.title}
);
}
}
英雄mage.propTypes={
标题：PropTypes.string，
image:PropTypes.string
};

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

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

---

我用谷歌搜索了太多，找不到答案。我确信这只是一个小改动，但我是否需要将滚动事件移动到页面？这听起来不太对劲。

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

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;

import React，{Component}来自'React'；
导入“/App.css”；
从'react dom'导入{findDOMNode}；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
材料：[]
}
this.handleScroll=this.handleScroll.bind（this）；
}
componentDidMount（）{
让stuff=this.state.stuff；
for（设i=0；i<250；i++）{
推（i）；
}
this.setState（{stuff}）；
window.addEventListener（'scroll'，this.handleScroll）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
handleScroll（）{
让node=findDOMNode（this）；
让维度=node.getBoundingClientRect（）；
控制台日志（尺寸）；
}
createRow（s，i）{
返回(
福
)
}
render（）{
返回(
{this.state.stuff.map（（s，i）=>this.createRow（s，i））}
);
}
}
导出默认应用程序；

---

我不能完全确定我是否理解您的代码和我的代码之间的差异，但这应该适合您。

您能发布更多信息吗？我试图复制此问题，但没有问题。下面是工作代码：我看到您的示例按照我的预期工作。让我为您提供更多的代码我已经添加了整个组件代码，以及如何将其添加到Context页面您是否在页面上包含应用程序？事件的发射是否正确？我看不出我的代码与你的代码有什么不同，但我的代码不起作用：（app是reacadom.redner注入index.html主div的组件。让我更困惑的是，herograge是一个添加到另一个组件的组件，然后在索引上呈现。htmlI可以将这个概念添加到我的示例中，看看会发生什么。这将非常有帮助。我只是想我正在继续某处