@ui5/webcomponents-react/dist/components/ObjectPage/useOnScrollEnd.js

React Wrapper for UI5 Web Components and additional components

import { useCallback, useEffect, useRef } from 'react';
const isScrollEndAvailable = typeof document !== 'undefined' && 'onscrollend' in document.createElement('div');
export function useOnScrollEnd(props) {
  const {
    objectPageRef,
    setTabSelectId
  } = props;
  const scrollEndTimeout = useRef(null);

  // Native scrollend listener
  useEffect(() => {
    const objectPage = objectPageRef.current;
    if (!objectPage || !isScrollEndAvailable) return;
    const onNativeScrollEnd = () => {
      setTabSelectId(null);
    };
    objectPage.addEventListener('scrollend', onNativeScrollEnd);
    return () => {
      objectPage.removeEventListener('scrollend', onNativeScrollEnd);
    };
  }, [objectPageRef, setTabSelectId]);

  // Fallback in onScroll
  const onObjectPageScroll = useCallback(() => {
    if (!isScrollEndAvailable) {
      if (scrollEndTimeout.current) {
        clearTimeout(scrollEndTimeout.current);
      }
      scrollEndTimeout.current = setTimeout(() => {
        setTabSelectId(null);
      }, 100);
    }
  }, [setTabSelectId]);
  return onObjectPageScroll;
}