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