Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する (2021年10月1日)

高橋

実装方法と解説

こちらが実際のコードの全体像となります。


import { RefObject, useEffect } from "react";
import {
 clearAllBodyScrollLocks,
 disableBodyScroll,
 enableBodyScroll,
} from "body-scroll-lock";

type Props = {
 isActive: boolean;
 target: RefObject<HTMLElement>;
}

export function useBodyScrollLock({ isActive, target }: Props) {
 useEffect(() => {
   if (target.current === null) {
     return;
   }

   if (isActive) {
     disableBodyScroll(target.current);
   } else {
     enableBodyScroll(target.current);
   }

   return () => clearAllBodyScrollLocks();
 }, [isActive, target])
}

以下、解説です。

Propsの型定義

type Props = {
 isActive: boolean;
 target: RefObject<HTMLElement>;
}

要素のスクロール固定のオン・オフを制御する isActive と、スクロール固定の実行時に、スクロールを許可する要素 target を定義しています。

呼び出し元のコンポーネントで useRef を使用して、target としてDOMの参照データを受け渡すようにします。

要素のスクロール固定のオン・オフの実装

if (target.current === null) {
 return;
}

if (isActive) {
 disableBodyScroll(target.current);
} else {
 enableBodyScroll(target.current);
}

Body scroll lockの disableBodyScroll メソッドと enableBodyScroll メソッドに、それぞれターゲットとなる要素のDOMの参照データを引数として渡しています。

副作用のクリーンアップの処理

return () => clearAllBodyScrollLocks();

副作用のクリーンアップとして clearAllBodyScrollLocks メソッドを返すように指定します。

この処理を追加することによって、アンマウント時に必ず要素のスクロール固定を解除して、意図しない要素のスクロール固定を回避します。

使用方法

// Example

import React, { useRef, useCallback, useState } from 'react';

export function Component() {
 const [isActive, setIsActive] = useState(false);
 const target = useRef<HTMLDivElement>(null);

 const handleOnDisable = useCallback(() => {
   setIsActive(true);
 }, []);

 const handleOnEnable = useCallback(() => {
   setIsActive(false);
 }, []);

 useBodyScrollLock({
   isActive,
   target
 });

 return (
   <div>
     <button type="button" onClick={handleOnDisable}>Disable Body Scroll</button>
     <button type="button" onClick={handleOnEnable}>Enable Body Scroll</button>
     <div ref={target}>
       Contents...
     </div>
   </div>
 );
}