27

I added listener on scroll, and tried to use event. How can I describe type instead of any ?

React 16.8.6 Tpescript 3.4

const Component: FC<IProps> = ({ children, scrollOffset, getScrollTop, videoListScrollUpdate }) => {
    const scroller = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (scrollOffset && scroller.current) {
            scroller.current.scrollTop = scrollOffset
            return
        }
        if (getScrollTop && scroller.current) {
            scroller.current.addEventListener('scroll', (e: any) => getScrollTop(e.target.scrollTop))
        }
    }, [])

}
0

5 Answers 5

33

You can use (e: React.UIEvent<HTMLElement>). Described under the UIEvent from SyntheticEvents.

That said, I would advise against using useRef within a useEffect. It's tricky to determine whether useEffect was re-called and scroller.current wasn't null (even console.log can be misleading about it).

However I would suggest to instead use the inbuilt onScroll prop on the component you are attaching the ref to, and give it a callback to handle the scroll. That way you don't need to attach it manually in the useEffect hook where you are forgetting to remove it on unmount(memory leak problems).


interface IProps {
  children: React.ReactNode;
  getScrollTop: (scrollTop: number) => whatever;
  // Your other Props
}

const ScrollComponent: React.FC<IProps> = ({
  children,
  getScrollTop,
  // Your other props
}): JSX.Element => {
  const handleScroll = (e: React.UIEvent<HTMLElement>): void => {
    e.stopPropagation() // Handy if you want to prevent event bubbling to scrollable parent
    console.log({
      event: e,
      target: e.target, // Note 1* scrollTop is undefined on e.target
      currentTarget: e.currentTarget,
      scrollTop: e.currentTarget.scrollTop,
    });

    const { scrollTop } = e.currentTarget;
    getScrollTop(scrollTop);
  };

  return (
  <div
    // I am assuming you were referencing your scroller as follows.
    // ref={scroller}
    onScroll={handleScroll} // Use the onScroll prop instead.
  >
    {children}
  </div>
  );
};

Note *1: scrollTop wont be available on e.target.scrollTop, much as you can see in in the console.log, but on e.currentTarget.scrollTop, since currentTarget calls the element on which the event handler is attached to.

4
  • 1
    Thank you for your additional solution. It's exactly what I wanted to accomplish and it's much cleaner than a ref. Commented May 12, 2020 at 1:26
  • 1
    @AndresSepulveda, these days though, you better debounce that scroll or use the Intersection Observer api because the scroll event fires waaayyyy too many times. Commented May 12, 2020 at 1:42
  • 1
    @iamcastelli IntersectionObserver doesnt react immediatelly, so sometimes its efficient but slow in terms of page interactions Commented Jul 14, 2020 at 12:02
  • "Event" is more appropriate for scroll handling. Typescript says "Type 'Event' is not assignable to type 'UIEvent<HTMLElement>".
    – Vadym P
    Commented Feb 23, 2022 at 10:15
6
document.addEventListener("scroll", (event) => {
      const e = event as WheelEvent;
      // do stuff
});
4

This worked for me -

//register the scroll event listener callback function
useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  })
// scroll event callback function
  const onScroll = (e: Event) => {
    const window = e.currentTarget as Window
    //... rest of you function
  }

Make sure to include dom lib in tsconfig.json

"compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        ...
      ],
3

const onScroll = (event: UIEvent) => {
      const target = event.target as HTMLElement;

      if (target && target.scrollTop + target.clientHeight + 1 >= target.scrollHeight) {
        // do the magic
      }
    };

-2

So, I'm just going to expand on the answer from @ManjuPrabhu

Header.tsx

const Header: React.FC<IHeader> = () => {
  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  });

  const onScroll = (e: Event) => {
    const window = e.currentTarget as Window;
    let currentPosition = window.scrollY;
    currentPosition > 0 ? setScrolling(true) : setScrolling(false);
  };

  return (
    <div
      // clsx is a npm package for conditional classes
      className={clsx('navbar sticky top-0 z-50', { 
        'shadow-2xl': scrolling,
      })}
    >
    Header content
    </div>
  );
};

tsconfig.json

"compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        ...
      ],

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.