ScrollArea documentation need to mention how to get scrollX and scrollY position

[InconstantUA]

Please update ScrollArea documentation. Please explain how to get scrollX and scrollY position. Because it took me several days to find out how to handle it. I want to share this information here and also prevent other users in future from stepping into the same pit. By default when you google for the solution it will tell you to use window.scrollx and scrollY position to get scroll offset. But with ScrollArea component, in fact, this should done in completely different way:
This should be queried on ScrollAreaPrimitive.Viewport component. For this, I need also get reference to this component.
So i had to modify source code like this:

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]" ref={ref}>
      {children}
    </ScrollAreaPrimitive.Viewport>
    {/* <ScrollBar /> */}
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))

In my .tsx file I need to do this:

const scroller = useRef<HTMLDivElement>(null);
return (
  <ScrollArea
    type="auto"
    className="w-[calc(100vw-8px)] h-[calc(100vh-174px)] rounded-lg"
    ref={scroller}
  >
  {Scroll content}
  </ScrollArea>
)

Then I can query scroll position like this:

console.log("new ScrollY position", scroller.current?.scrollTop);
console.log("new ScrollX position", scroller.current?.scrollLeft);

The code above works for me, but this may be not the best approach. Please correct/guide me, if I'm doing it in the wrong way.
Thanks in advance!

[sailinhtut]

To get ScrollX and ScrollY value of your scrollable component, you can simply use onScrollCapture event of <ScrollArea>

<ScrollArea
            className="w-full h-[800px]"
            onScrollCapture={(event) => {
              console.log(event.target.scrollLeft);     // Scroll X
              console.log(event.target.scrollTop);      // Scroll Y
              console.log(event.target.scrollHeight);   // Max Constraint Height 
              console.log(event.target.scrollWidth);    // Max Constraint Width 
            }}
          >
<div>...</div>
<ScrollBar/>
</ScrollArea>

[Lucassssss]

// value
const chatArea = chatAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]');
console.log(chatArea.scrollHeight, chatArea.scrollTop, chatArea.clientHeight);

// event
<ScrollArea ref={chatAreaRef} onScrollCapture={handleScroll} />
const handleScroll = ()=>{
  const chatArea = chatAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]');
  console.log(chatArea.scrollHeight, chatArea.scrollTop, chatArea.clientHeight);
}

[oddFEELING]

I actually need to be able to control it.

[InconstantRO]

I actually need to be able to control it.

scroller.current?.scrollTo({ left: x, top: y, behavior: "instant", });
Where scroller is the reference to the ScrollAreaPrimitive.Viewport

[oceangravity]

Hi ❤️

If someone needs to save and restore the scroll position.:

export function LogisticGrid(
  { selectable = false, actions }:
  { selectable: boolean, actions?: (order: IOrder) => React.ReactNode },
) {

  const {
    data: { result = [] } = {},
    isFetching,
    selectedItems,
    setSelectedItems,
  } = useModule({ enabled: false })

  const handleSelectAll = useCallback(() => {
    setSelectedItems(selectedItems.length === result.length ? [] : result.map(item => item.orderID))
  }, [setSelectedItems, selectedItems, result])

  const handleItemChange = useCallback((id: string) => {
    const newSelectedItems = (prevSelected: string[]) =>
      prevSelected.includes(id) ? prevSelected.filter(itemId => itemId !== id) : [...prevSelected, id]
    setSelectedItems(newSelectedItems(selectedItems))
  }, [setSelectedItems, selectedItems])

  useEffect(() => {
    setSelectedItems([])
  }, [setSelectedItems, isFetching])

  const renderItem = (order: IOrder) => {
    const { id, orderID, fullStarID, origin, purchaseAt, courier, cacId, orderStatus } = order

    return (
      ...
    )
  }

  const scrollAreaRef = useRef<HTMLDivElement>(null)

  const restoreScrollPosition = () => {
    const savedPosition = localStorage.getItem('scrollPosition')
    if (savedPosition && scrollAreaRef.current) {
      const scrolleableElement = scrollAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]')
      if (scrolleableElement) {
        scrolleableElement.scrollTop = parseInt(savedPosition, 10)
      }
    }
  }

  useEffect(() => {
    restoreScrollPosition()
  }, [])

  const handleScroll = () => {
    const chatArea = scrollAreaRef.current?.querySelector('[data-radix-scroll-area-viewport]')
    const scrollTop = chatArea?.scrollTop || 0
    localStorage.setItem('scrollPosition', scrollTop.toString())
  }

  return (
    <>
      {
        selectable &&
        <div className="px-4 py-3 flex items-center gap-4 bg-gray-50 border-b">
          <Checkbox
            id="select-all"
            checked={selectedItems.length === result.length}
            onCheckedChange={handleSelectAll}
          />

          <Label
            htmlFor="select-all"
            className="text-base font-normal text-gray-700 cursor-pointer flex items-center gap-2"
          >
            <span>Seleccionar todos</span>
            <span className="opacity-0"> ({selectedItems.length})</span>
          </Label>
        </div>
      }

      <ScrollArea type={'auto'} ref={scrollAreaRef} onScrollCapture={handleScroll}>
        <div className="flex flex-col p-4 gap-4">
          {
            isFetching ?
              <div className="w-6 h-6 border-2 border-gray-50 border-t-blue-500 rounded-full animate-spin" />
              :
              (
                result.length ?
                  result.map(renderItem)
                  :
                  <div className="flex justify-center items-center">No records to show</div>
              )
          }
        </div>
      </ScrollArea>
    </>
  )
}