T
TanStack•2y ago
exotic-emerald

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]);
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 ?
1 Reply
secure-lavender
secure-lavender•2y ago
Hey. Did you try adding {passive:false} to the wheel handler? Here's mine code: 
  React.useEffect(() => {
    const handleScroll = (e: WheelEvent) => {
      e.preventDefault();
      const currentTarget = e.currentTarget as HTMLElement;

      if (currentTarget) {
        currentTarget.scrollTop -= e.deltaY;
      }
    };
    parentRef.current?.addEventListener("wheel", handleScroll, {
      passive: false,
    });
    return () => {
      parentRef.current?.removeEventListener("wheel", handleScroll);
    };
  }, []);
  React.useEffect(() => {
    const handleScroll = (e: WheelEvent) => {
      e.preventDefault();
      const currentTarget = e.currentTarget as HTMLElement;

      if (currentTarget) {
        currentTarget.scrollTop -= e.deltaY;
      }
    };
    parentRef.current?.addEventListener("wheel", handleScroll, {
      passive: false,
    });
    return () => {
      parentRef.current?.removeEventListener("wheel", handleScroll);
    };
  }, []);

Did you find this page helpful?