Track when the scroll appears at the very top of the component

I have a website written in React using Typescript.
The entire page can be schematically represented like this

FirstPage.tsx

 export function FirstPage() {
  return (
<ScrollArea.Root className={clsxm('h-full')}>
  <ScrollArea.Viewport className={clsxm('max-h-[100%] min-h-[100%]')}>
    <div>
      <div>
        <Sidebar />
      </div>

      <div className="w-[100vw]">
        <MainPage />
      </div>
    </div>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar/>
</ScrollArea.Root>
  );
}

MainPage.tsx

 export function MainPage() {
  return (
   <div>
    <div className="m-auto flex h-full w-[43vw] flex-col">
      <div>
        <SomeComponent1 />
      </div>

      <div>
        <SomeComponent2 />
      </div>

      <div>
        <SomeComponent3 />
      </div>

      <div>
        <SomeComponent4 />
      </div>
    </div>

    <div className="flex h-[45px] items-start justify-center">
      <Button />
    </div>
   </div>
  );
}

As you can see, the FirstPage component is wrapped in a ScrollArea from the Radix library (but looking ahead, if I remove the ScrollArea from the code, this does not solve the problem). It is ScrollArea that defines the scroll for the MainPage component (Because component SideBar have position: fixed).

The point is that I want to control the moment when there is a scroll and when the scroll is at the very top. I tried many solutions from this site and from the network, but none of the solutions helped me (apparently there is an error somewhere in the logic of the code or I am using these examples incorrectly)

Tell me how I can track the moment when there is a scroll and when the scroll is at the very top. That is, I would like to receive “true” if the condition is true, and “false” if the condition is false