OnScroll event firing without scrolling - Reactjs

Question

I have a div on which I've added onScroll and triggering a function on scroll event.

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

On load the scroll event triggers multiple times when there is no scrolling yet. Can't seem to figure out how to prevent this.

Can you post a minimal example? I can't reproduce it codesandbox.io/s/keen-chaplygin-570ps?file=/src/App.js — Rodrigo Amaral
– Rodrigo Amaral, Commented Sep 6, 2020 at 16:26

Will · Accepted Answer · 2020-09-06 16:11:58Z

1

There must be something else causing that because, from the code you provided, the event only fires when the view has been scrolled. I added styling to get the scrollbar


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

answered Sep 6, 2020 at 16:11

Will

3191 gold badge4 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

OnScroll event firing without scrolling - Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related