Reverse virtual scroll

hello I'm making a chat app with react query and react virtual. To display the messages I need to virtualize the list starting from the bottom with the latest message.

I have implemented a virtual scroll and it work fine to display in the natural order ( top to bottom). To reverse the display I have apply transform with scaleY(-1) to both scroller and items. However now my mouse wheel is reverse.

To counter the reverse mouse whell I have found a snipset on github.

  useEffect(() => {
    const el = parentRef.current;
    if (!el) return;
    const invertedWheelScroll = (event: any) => {
      debugger
      el.scrollTop -= event.deltaY;
      event.preventDefault();
    };

    el.addEventListener('wheel', invertedWheelScroll, false);

    return () => el.removeEventListener('wheel', invertedWheelScroll);
  }, [parentRef.current]);

  useEffect(() => {
    const el = parentRef.current;
    if (!el) return;
    const invertedWheelScroll = (event: any) => {
      debugger
      el.scrollTop -= event.deltaY;
      event.preventDefault();
    };

    el.addEventListener('wheel', invertedWheelScroll, false);

    return () => el.removeEventListener('wheel', invertedWheelScroll);
  }, [parentRef.current]);

  useEffect(() => {
    const el = parentRef.current;
    if (!el) return;
    const invertedWheelScroll = (event: any) => {
      debugger
      el.scrollTop -= event.deltaY;
      event.preventDefault();
    };

    el.addEventListener('wheel', invertedWheelScroll, false);

    return () => el.removeEventListener('wheel', invertedWheelScroll);
  }, [parentRef.current]);

  useEffect(() => {
    const el = parentRef.current;
    if (!el) return;
    const invertedWheelScroll = (event: any) => {
      debugger
      el.scrollTop -= event.deltaY;
      event.preventDefault();
    };

    el.addEventListener('wheel', invertedWheelScroll, false);

    return () => el.removeEventListener('wheel', invertedWheelScroll);
  }, [parentRef.current]);

The bad effect of this sollution is that scroll fell laggy by snapping to each scroll position.

Does anyone have implemented a reverse scroll or knows how to counter the laggy effect of my inverted mouse wheell ?

Reverse virtual scroll

Similar Threads

Similar Threads

Similar Threads