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

[pavelgromyko]

I have a website written in React using Typescript.

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 stackoverflow 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