Невозможно прокрутить элемент переполнения в приложении Next.js после интеграции компонента Lenis React ⇐ CSS

[Anonymous]

Недавно я интегрировал компонент Lenis React в свое приложение Next.js, и с тех пор столкнулся с проблемой прокрутки элемента с помощью класса «overflow-scroll» на моей странице. До интеграции компонента Lenis прокрутка работала без проблем.
это стили CSS overflow-y-scroll pr-[17px] box-content

• Попробовал также использовать ScrollArea из Mantine, но проблема не устранена.
• Пытался сосредоточиться на mouseOver.
• Пытался реализовать мой собственная логика прокрутки

Код

Код: Выделить всё

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]);

но это прокручивается в зависимости от положения мыши. (не то, что я ищу).
Несмотря на все эти усилия, мне все еще не удается прокрутить элемент переполнения. Как я могу устранить и решить эту проблему? Любые идеи или предложения будут с благодарностью приняты. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/781 ... is-react-c