CODEWITHSUNDEEP
reactjstypescriptnext.jssmooth-scrollinglenis
lil filda
lil filda

Reputation: 1

Lenis smooth scroll in NextJs

I hope you're doing well. I have a question regarding disabling Lenis smooth scroll, particularly for trackpads on my MacBook Pro. My project is built using Next.js 14. Here is the code I'm currently using:

'use client'
import { ReactNode } from 'react'
import { ReactLenis } from '@studio-freight/react-lenis'

// Define the props type
interface SmoothScrollingProps {
  children: ReactNode
}

const SmoothScrolling: React.FC<SmoothScrollingProps> = ({ children }) => {
  return (
    <ReactLenis root options={{ lerp: 0.1, duration: 1.5 }}>
      {children}
    </ReactLenis>
  )
}

export default SmoothScrolling

Any guidance on how to achieve this would be greatly appreciated.

Thank you!

What I've Tried I have attempted to modify the configuration settings for Lenis, but I haven't been able to achieve the desired result.

Despite these attempts, the smooth scrolling behavior on the trackpad remains problematic.

What Happened The modifications I made did not seem to have any effect on the trackpad behavior. The scroll still feels inconsistent and not as smooth as I would like it to be.

Why It Didn’t Meet My Needs The current solution works perfectly with a mouse, but fails to provide a smooth experience on a trackpad, which is crucial for MacBook users.

Request for Guidance Any guidance on how to disable or adjust the Lenis smooth scroll specifically for trackpads would be greatly appreciated. If anyone has encountered and resolved a similar issue or has any insights on how to address this, I would love to hear your suggestions.

Thank you!

Upvotes: 0

Views: 788

Answers (0)

Related Questions