Function useScrollTopOffset

packages/shared/src/hooks/useScrollTopOffset.ts:10–45

(
  getElement: () => HTMLElement | Window | null | undefined,
  {
    onOverOffset,
    onUnderOffset,
    offset = 0,
    scrollProperty = 'scrollTop',
  }: UseScrollTopOffsetProps,
)

}

export const useScrollTopOffset = (
  getElement: () => HTMLElement | Window | null | undefined,
  {
    onOverOffset,
    onUnderOffset,
    offset = 0,
    scrollProperty = 'scrollTop',
  }: UseScrollTopOffsetProps,
): void => {
  useEffect(() => {
    const element = getElement();

    if (!element) {
      return undefined;
    }

    const onScroll = () => {
      let scrollValue = document.documentElement.scrollTop;

      if (scrollProperty === 'scrollY') {
        scrollValue = 'scrollY' in element ? element.scrollY : window.scrollY;
      } else if ('scrollTop' in element) {
        scrollValue = element.scrollTop;
      }

      const command = scrollValue > offset ? onOverOffset : onUnderOffset;
      command();
    };

    element.addEventListener('scroll', onScroll);

    return () => {
      element.removeEventListener('scroll', onScroll);
    };
  }, [onOverOffset, onUnderOffset, offset, scrollProperty, getElement]);
};