How to make it work with an inner container that has overflow auto? about use-scroll-position HOT 16 CLOSED

useScrollPosition(({ prevPos, currPos }) => {
     console.log("scrolling");
}, [visibleFilterResultButton], props.forwardedRef);

/**
 * useScrollPosition.js
 */

import React from 'react';

const isBrowser = typeof window !== `undefined`;
const zeroPosition = { x: 0, y: 0 };

const useIsomorphicLayoutEffect = typeof window !== 'undefined'
  ? React.useLayoutEffect
  : React.useEffect;

const getScrollPosition = (element) => {
  if (!isBrowser || element === null || element === void 0) {
    return zeroPosition;
  }
  return {
    x: element.current.scrollLeft, 
    y: element.current.scrollTop
  };
};

const getScrollProps = (element) => {
  if (!isBrowser || element === null || element === void 0) {
    return {
      top: false, 
      bottom: false,
      scrollable: false
    };
  }
  return {
    top: element.current.scrollTop === 0, 
    bottom: (element.current.clientHeight + element.current.scrollTop) === element.current.scrollHeight,
    scrollable: element.current.scrollHeight > element.current.clientHeight
  };
};

const resizeSensor = (element, callback) =>
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    const setScroll = () =>
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();
    let currentWidth = size.width;
    let currentHeight = size.height;

    const onScroll = () =>
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth !== currentWidth || newHeight !== currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    const cleanup = () => {
      expand.removeEventListener('scroll', onScroll);
      shrink.removeEventListener('scroll', onScroll);
    }

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);

    return cleanup;
};

export default function useScrollPosition(callback, deps, element, wait) {
  const resizeCleanup = React.useRef();
  const position = React.useRef(zeroPosition);
  const throttleTimeout = React.useRef(null);
  const [callbackState] = React.useState(() => callback);

  const localCallback = React.useCallback(() => {
    const currPos = getScrollPosition(element);
    const scrollProps = getScrollProps(element);
    callbackState({ 
      prevPos: position.current, 
      currPos,
      isTop: scrollProps.top,
      isBottom: scrollProps.bottom,
      isScrollable: scrollProps.scrollable
    });
    position.current = currPos;
    throttleTimeout.current = null;
  }, [element, callbackState]);

  React.useLayoutEffect(() => {
    localCallback();
  }, [localCallback]);

  useIsomorphicLayoutEffect(() => {
    if (!isBrowser) {
      return undefined;
    }

    const handleScroll = () => {
      if (wait) {
        if (throttleTimeout.current === null) {
          throttleTimeout.current = setTimeout(localCallback, wait);
        }
      }
      else {
        localCallback();
      }
    };

    if (element && element.current !== null && element.current !== void 0) {
      element.current.addEventListener('scroll', handleScroll, { passive: true });
      resizeCleanup.current = new resizeSensor(element.current, handleScroll);
    }

    return () => {
      if (element && element.current !== null && element.current !== void 0) {
        element.current.removeEventListener('scroll', handleScroll, { passive: true });
      }

      if (resizeCleanup.current) {
        resizeCleanup.current();
      }
      
      if (throttleTimeout.current) {
        clearTimeout(throttleTimeout.current);
      }
    };
  }, deps);
};

  useScrollPosition(
    ({ currPos, prevPos, isTop, isBottom, isScrollable }) => {
      console.log('scroll info', currPos, prevPos, isTop, isBottom, isScrollable);
    }, 
    [], 
    scrollRef,
  );