OnScroll事件触发而不滚动-React.js

如何解决OnScroll事件触发而不滚动-React.js

我在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>
  );
};

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

解决方法

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

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>
  );
}
}