virtual-list icon indicating copy to clipboard operation
virtual-list copied to clipboard

嵌套滚动内容时,内部滚动效果会直接穿透到外层虚拟列表不生效

Open Guan-Erjia opened this issue 1 year ago • 0 comments

目前只能用这种方法在内部滚动区域拦截 wheelCapture 事件,有没有什么更简洁的方法呢

import {UIEvent, useCallback, useEffect, useRef, WheelEvent} from 'react';
export const useProxyWheel = (ref: HTMLElement | null) => {
    const canDeltaUp = useRef(false);
    const canDeltaDown = useRef(false);
    const onWheelCapture = (e: WheelEvent<HTMLElement>) => {
        if (e.deltaY > 0 && !canDeltaDown.current) {
            e.stopPropagation();
        }
        if (e.deltaY < 0 && !canDeltaUp.current) {
            e.stopPropagation();
        }
    };
    const calculate = (target: HTMLElement) => {
        if (target.scrollTop + target.clientHeight >= target.scrollHeight - 2) {
            canDeltaDown.current = true;
            canDeltaUp.current = false;
        } else if (target.scrollTop === 0) {
            canDeltaDown.current = false;
            canDeltaUp.current = true;
        } else {
            canDeltaDown.current = false;
            canDeltaUp.current = false;
        }
    };

    const onScroll = (e: UIEvent<HTMLElement>) => {
        calculate(e.target as HTMLElement);
    };

    const resizeObserver = useRef<ResizeObserver>(
        new ResizeObserver(() => {
            ref && calculate(ref);
        })
    );
    const cleanupFn = useCallback(() => {
        ref && resizeObserver.current.unobserve(ref);
    }, [ref]);

    useEffect(() => {
        if (ref) {
            calculate(ref);
            resizeObserver.current.observe(ref);
        }
        return cleanupFn;
    }, [cleanupFn, ref]);

    return {
        onWheelCapture,
        onScroll,
    };
};

Guan-Erjia avatar Dec 03 '24 09:12 Guan-Erjia