Macbook
30 lines
840 B
TypeScript
30 lines
840 B
TypeScript
import { useEffect, type RefObject } from 'react';
|
|
|
|
/** 가로 overflow 컨테이너 — 세로 휠을 좌우 스크롤로 변환 */
|
|
export function useHorizontalWheelScroll(
|
|
ref: RefObject<HTMLElement | null>,
|
|
enabled = true,
|
|
): void {
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
|
|
const onWheel = (e: WheelEvent) => {
|
|
if (el.scrollWidth <= el.clientWidth + 1) return;
|
|
|
|
const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
|
|
if (delta === 0) return;
|
|
|
|
const prev = el.scrollLeft;
|
|
el.scrollLeft += delta;
|
|
if (el.scrollLeft !== prev) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
el.addEventListener('wheel', onWheel, { passive: false });
|
|
return () => el.removeEventListener('wheel', onWheel);
|
|
}, [enabled, ref]);
|
|
}
|