CODEWITHSUNDEEP
cssnext.js
Alister Sequeira
Alister Sequeira

Reputation: 11

Unable to Scroll Overflow Element in Next.js App after Integrating Lenis React Component

I recently integrated Lenis React component into my Next.js application, and since then, I've encountered an issue with scrolling an element with the "overflow-scroll" class on my page. Prior to integrating the Lenis component, scrolling worked seamlessly. this are the css styles overflow-y-scroll pr-[17px] box-content

Code

useEffect(() => {
    const element = carouselContainerRef.current;

    const handleMouseMove = (event) => {
      if (!isScrolling) return;

      // Simplified calculations since we're using the ref directly
      const containerRect = element.getBoundingClientRect();
      const deltaY = event.clientY - containerRect.top;

      const maxScrollTop = element.scrollHeight - element.clientHeight;
      const newScrollTop = Math.min(Math.max(0, deltaY), maxScrollTop);

      element.scrollTop = newScrollTop;
    };

    if (element) {
      element.addEventListener('mousemove', handleMouseMove);
    }
    return () => {
      if (element) {
        element.addEventListener('mousemove', handleMouseMove);
      }
    };
}, [isScrolling]);

but this scrolls based on mouse position. (not what i am searching for).

Despite these efforts, I'm still unable to scroll the overflow element. How can I troubleshoot and resolve this issue? Any insights or suggestions would be greatly appreciated. Thank you!

Upvotes: 1

Views: 576

Answers (1)

Surya
Surya

Reputation: 19

I think what you would need is data-lenis-prevent. When we add Lenis, and want to scroll on a component level, Adding this will prevent lenis from breaking the scroll.

Refer to this doc for more info: Link

Nested scroll

<div data-lenis-prevent>scroll content</div>
<div data-lenis-prevent-wheel>scroll content</div>
<div data-lenis-prevent-touch>scroll content</div>

Upvotes: 1

Related Questions