bodyや指定要素のスクロールをロック・解除するフック
このページのbodyはスクロールしないため、ここでは動作を試せません。実際のスクロール可能なページでご確認ください。
targetRefObject<HTMLElement | null>document.body| Prop | Type | Default |
|---|---|---|
target | RefObject<HTMLElement | null> | document.body |
lock() => voidunlock() => void| Prop | Type | Default |
|---|---|---|
lock | () => void | - |
unlock | () => void | - |
import { useScrollLock } from '@k8ordo/ui';const { lock, unlock } = useScrollLock();
return (
<div>
<button onClick={lock}>Lock</button>
<button onClick={unlock}>Unlock</button>
</div>
);const scrollRef = useRef<HTMLDivElement>(null);
const { lock, unlock } = useScrollLock(scrollRef);
return (
<div>
<button onClick={lock}>Lock area</button>
<button onClick={unlock}>Unlock area</button>
<div ref={scrollRef} style={{ overflow: 'auto', height: 128 }}>
{/* scrollable content */}
</div>
</div>
);