Saving scroll position with Radix Ui does not work on mobile

555 Views Asked by At

Using radix's scroll-area it works perfectly fine on desktop, but using a mobile device the scrolltop prints out 0. Is this a thing with radix or my implementation? I know the gesture is being recognized, but it is something to do with radix viewport

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  ScrollAreaProps
>(({ className, children, storageKey, resetCondition, ...props }, ref) => {
  const scrollRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    const handleScroll = () => {
      console.log("Scroll detected", scrollRef.current?.scrollTop)
    }

    const scrollElement = scrollRef.current

    if (scrollElement) {
      scrollElement.addEventListener("scroll", handleScroll)
      scrollElement.addEventListener("touchstart", handleScroll)
    }

    return () => {
      if (scrollElement) {
        scrollElement.removeEventListener("scroll", handleScroll)
      }
    }
  }, [])

  return (
    <ScrollAreaPrimitive.Root
      ref={ref}
      className={cn("relative overflow-hidden", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        ref={scrollRef}
        className="h-full w-full rounded-[inherit]"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
})

Tried saving scroll position but it didnt work on mobile

0

There are 0 best solutions below