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