Lenis Incompatibility with ScrollArea in `shadcn`

[iamDyeus]

Describe the Bug I am building a React app that uses shadcn. While lenis worked fine in most areas, an issue occurred in my Dashboard Layout, where I am using a ScrollArea component to display content. lenis caused the scroll area to malfunction, preventing it from scrolling as expected. The shadcn ScrollArea component is derived from @radix-ui/react-scroll-area. (Note: I can still scroll manually using the scrollbar in the scroll area, but cannot scroll using the mouse wheel.)

To Reproduce

• Create a React app with shadcn.
• Use the ScrollArea component from shadcn.
• Apply lenis on top of it.

Here’s how my layout is set up

<>
    <div className="grid w-full min-h-screen min-w-screen md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
      {/* Sidebar */}
      <StudentNav />

      {/* Main content area */}
      <div className="flex flex-col h-screen">
        {/* Fixed Header */}
        <StudentHeader />

        {/* Scrollable area for the Outlet */}
        <ScrollArea className="flex-1 overflow-auto" style={{ overflowY: 'auto' }}>
          <div className="flex-1 overflow-y-auto">
            <Outlet />
          </div>
        </ScrollArea>
      </div>
    </div>
</>

[saoudi-h]

I have the same problem

[clementroche]

Please share a minimal reproduction link, you can use codesandbox.

Simple guess by reading the documentation:

new Lenis({
  prevent: (node)=>node?.hasAttribute('data-radix-scroll-area-viewport')
})

[clementroche]

I'm closing this issue until your share a minimal reproduction link.