How to Add Scroll Event in React Component

How to add scroll event in react component

You need to bind this to the element in context.

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}

Update style of a component onScroll in React.js

You should bind the listener in componentDidMount, that way it's only created once. You should be able to store the style in state, the listener was probably the cause of performance issues.

Something like this:

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

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

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},

How do I add an onScroll handler to the menuList of a react-select component?

You need to wrap your MenuList component with div and provide ref to this component and then access the immediate div child of this HTML component. Then you can define the onscroll function to this element.

const MenuList = (
  props: MenuListProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
  const menuListRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (menuListRef.current) {
      menuListRef.current.querySelector("div").onscroll = () => {
        console.log("scrolling");
      };
    }
  }, [menuListRef]);

  return (
    <div ref={menuListRef}>
      <components.MenuList {...props}>
        <div>{props.children}</div>
      </components.MenuList>
    </div>
  );
};

How to trigger a function on a scroll event in react

I used onScroll={()=> someFunc()}

React app does not fire off onScroll events as expected

You should pass an empty array to useEffect as the second argument so that the function is fired only after the component mounts for the first time. Not passing a second argument, will trigger the function after every rerender and passing [scrollTop] will trigger the function every time scrollTop changes.

Something like this should work:

  const [offset, setOffset] = React.useState(null);
  const setScroll = () => {
    setOffset(window.scrollY);
  };

  React.useEffect(() => {
    window.addEventListener("scroll", setScroll);
    return () => {
      window.removeEventListener("scroll", setScroll);
    };
  }, []);

Working example: https://codesandbox.io/s/zen-cdn-ll6es?file=/src/App.js

How to Handle Scrollbar event in a Table in React

You need to add the event listener to window and not the element:

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true })
  }, []);


  function handleScroll(e) {
    if (e.currentTarget.className === 'react-bootstrap-table') {
       console.log("hello")
    }
  }

How can I apply a global scroll event to multiple React components?

Custom Hooks, Custom Hooks, Custom Hooks

import { isInViewport } from './Helpers.js';


function useIsInViewPort(ref) {
 const [inViewport, setInViewport] = React.useState(false);

  function handleScroll(e) {
    setInViewport(isInViewport(ref.current));
  }

  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    // unmount
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return inViewport;
}


function Acmp(props) {
  const ref = React.useRef();
  const inViewport = useIsInViewPort(ref); 
  const classes = (inViewport) ? 'animate animate--active' : 'animate';

  return (
    <section className={classes} ref={ref}>
    </section>
  );
}


function Bcmp(props) {
  const ref = React.useRef();
  const inViewport = useIsInViewPort(ref); 

  return (
    <section className={classes} ref={ref}>
    </section>
  );
}

---

Related Topics