Smooth Overlayscrollbars Scrolk от фиксированного колеса заголовок в React ⇐ Javascript

[Anonymous]

Я строю приложение React, используя TypeScript и Overlayscrollbars-React для обработки прокрутки для основной области содержания. Выше этого прокручиваемого контента у меня есть фиксированный компонент заголовка (HeaderApp). < /P>
Цель: < /p>
Я хочу, чтобы пользователь мог прокручивать контейнер с наложениями, даже когда их курсор мыши парил над фиксированным HeaderApp. Желаемое поведение прокрутки должно быть гладким, в идеале соответствовать нативному ощущению прокрутки непосредственно в виде наложных просмотров просмотров. Следуют рекомендациям (например, в выпуске № 150 #150 № 150) я захватываю событие колеса на HeaderApp, предотвращаю его действие по умолчанию, а затем программно прокручивая контейнер перекрытий. Пробое: < /strong> < /p>

Ручная анимация с requestAnimationFrame: Этот подход чувствует себя наиболее близким, но он все еще не идеален - прокрутка может ощущать
немного резко или отключено от ощущения нативного скрутка,
, особенно с небольшими, кодом одиночного колеса. мой компонент headerapp.tsx: < /p>
// Simplified HeaderApp component structure
import React, { useRef, useEffect, useCallback } from 'react';
import type { OverlayScrollbars } from 'overlayscrollbars';
// osGlobalInstance is obtained from the ScrollableContainer component
import { osGlobalInstance } from "../ScrollableContainer/ScrollableContainer";

const HeaderApp: React.FC = (/*...props*/) => {
const headerRef = useRef(null);

// Function for smooth scroll animation
const scrollContent = useCallback((deltaY: number) => {
if (osGlobalInstance) {
const { scrollOffsetElement } = osGlobalInstance.elements();
if (!scrollOffsetElement) return;

// Cancel any previous animation frame for this specific scroll action
// (Requires managing animation frame IDs - simplified here)
// cancelAnimationFrame(animationFrameIdRef.current);

const targetScrollTop = scrollOffsetElement.scrollTop + deltaY;
const duration = 300; // Animation duration
const start = scrollOffsetElement.scrollTop;
const startTime = performance.now();

const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);

const smoothScrollStep = (currentTime: number) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easing = easeOutCubic(progress);

scrollOffsetElement.scrollTop = start + (targetScrollTop - start) * easing;

if (progress < 1) {
requestAnimationFrame(smoothScrollStep);
// Store animationFrameIdRef.current = requestAnimationFrame(...)
}
};

requestAnimationFrame(smoothScrollStep);
// Store animationFrameIdRef.current = requestAnimationFrame(...)
}
}, []); // Dependency on osGlobalInstance if it changes

// Wheel event handler on the header
const handleWheel = useCallback((event: WheelEvent) => {
if (osGlobalInstance) {
// Prevent default page scroll and stop propagation
if (event.cancelable) {
event.preventDefault();
}
event.stopPropagation(); // Prevent event from bubbling further if needed

// Adjust sensitivity if necessary
const scrollAmount = event.deltaY * 1.5; // Example multiplier

scrollContent(scrollAmount);
}
}, [scrollContent]); // Dependency on scrollContent

// Attach wheel listener
useEffect(() => {
const headerElement = headerRef.current;
if (headerElement && osGlobalInstance) {
headerElement.addEventListener('wheel', handleWheel, { passive: false });
}
return () => {
if (headerElement) {
headerElement.removeEventListener('wheel', handleWheel);
}
};
}, [osGlobalInstance, handleWheel]); // Dependencies

return (

{/* Header content */}

);
};

export default HeaderApp;

// In ScrollableContainer.tsx (simplified):
// export let osGlobalInstance: OverlayScrollbars | null = null;
// ...
// const handleInitialized = (instance: OverlayScrollbars) => {
// osGlobalInstance = instance;
// // ...
// };
// ...
//
< /code>

Использование scrolloffsetelement.scrollby ({поведение: 'Smooth'}): этот
казался многообещающим, но призывая его быстро из потока wheel
inful, вызвавшей бессмысленную анимацию Browser. Дроить звонки
немного помогли, но не полностью разрешили резкость. /> smoothness.
< /li>
< /ol>
Вопрос: < /strong> < /p>
Как я могу достичь действительно плавного, нативного программного прокрутки контейнера < / /prece-container, запускаемого колесами,> Prect> Prect> Prect> PRE-in Int? Чтобы реализовать цикл requestAnimationFrame, чтобы более изящно обрабатывать поток значений Deltay? (например, динамическая настройка цели, лучшая отмена). < /p>
Есть ли функция API наложений Crollbars или конкретный метод, который мне не хватает для этого сценария? очень ценится!

Подробнее здесь: https://stackoverflow.com/questions/795 ... t-in-react