-
Notifications
You must be signed in to change notification settings - Fork 166
Open
Description
目前只能用这种方法在内部滚动区域拦截 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,
};
};
Metadata
Metadata
Assignees
Labels
No labels