OnScroll 事件触发而不滚动 - Reactjs答案

【问题标题】：OnScroll event firing without scrolling - ReactjsOnScroll 事件触发而不滚动 - Reactjs
【发布时间】：2020-09-07 00:11:58
【问题描述】：

我有一个 div，我在其上添加了 onScroll 并触发了滚动事件的功能。

import React, { useRef } from 'react';

export const DemoComponent () => {
  const myref = useRef(null);
  const scrollEvent = () => {
    //do something here
    //Problem is that this event is triggering on load multiple times even when there is no scroll happening
  };
  return (
     <div onScroll={scrollEvent} ref={myref}></div>
  );
};

在加载时，滚动事件会在没有滚动时触发多次。似乎无法弄清楚如何防止这种情况发生。

【问题讨论】：

你能发布一个最小的例子吗？我无法重现它codesandbox.io/s/keen-chaplygin-570ps?file=/src/App.js

标签： reactjs onscroll

【解决方案1】：

一定有其他原因导致该问题，因为根据您提供的代码，该事件仅在视图滚动时触发。我添加了样式以获取滚动条


export default class MyComponent extends Component {
scrollEvent = () => {
  console.log("renders");
  //do something here
  //Problem is that this event is triggering on load multiple times even when there is no scroll happening
};

render() {
  const style = {
    width: "100px",
    height: "100px",
    overflowY: "scroll",
  };
  const innerDiv = {
    height: "300px",
    width: "100px",
    background: "#efefef",
  };
  return (
    <div style={style} onScroll={this.scrollEvent}>
      <div style={innerDiv} />
    </div>
  );
}
}

【讨论】：