Reactで作ったモーダルメニューを表示させるとメイン画面のスクロール位置がトップに戻ってしまう。

Question

前提

ReactでWebページを作っており、メニューボタンをクリックorタップするとモーダルでメニューが表示されるようにしたのですが、モーダルを表示すると必ずスクロールが一番上まで戻ってしまいます。

実現したいこと

モーダルでメニューを表示させてもメイン画面のスクロール位置が保持されるようにしたいです。

該当のソースコード

import React from 'react'

//activeがtrueになるとモーダルが表示されるようにしています。
function Modal({active}) {

  const scrollTop = () => {
    return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
  };

  if(active) {
    const position = scrollTop();
    console.log(position);　//ここにしかコンソールログは書いていないのに、コンソールを見るとスクロール位置が出力された後に0pxという出力も出ており、メイン画面の必ずスクロール位置が必ずトップまで戻ってしまいます。

    document.body.style.overflowY = "hidden";
    document.body.style.height = "100vh";

    document.documentElement.style.overflowY = "scroll";

    document.body.style.position = "fixed";
    document.body.style.top = -position;

  } else {

    document.body.style.overflowY = "auto";
    document.body.style.height = "auto";

    document.documentElement.style.overflowY = "auto";
    document.body.style.position = "static";

  }

      return (
      <>
        <ul className="navlist toggle_contents" style={{
            transition: '1.5s',
            opacity: active ? 1 : 0,
            zIndex: active ? 4 : -1,
            }}>
            <li className="navitem current_page_item"><a href="#">About</a></li>
            <li className="navitem"><a href="#">Feature</a></li>
            <li className="navitem"><a href="#">Blog</a></li>
            <li className="navitem"><a href="#">Contact</a></li>
          </ul>
      </>
    )
}
 
export default Modal

試したこと

Googleで「React　モーダル　スクロール位置」などと検索して、
https://qiita.com/IgnorantCoder/items/3b66c9e96c2f24e0d09e
や、
https://qiita.com/ragnar1904/items/184a10fbb4d216625aa8
の記事など読んだのですが、自分のコードに落とし込む事ができずにいます。

詳しい方がおられましたら教えていただけると幸いです。
宜しくお願いします。

補足情報（FW/ツールのバージョンなど）

VSCode1.61.8

Comments

[hoshi-takanori]

React で document.body とか document.documentElement とかいじるのは良くないはず…。

[tmyk1979]

いつもアドバイスありがとうございます。
> React で document.body とか document.documentElement とかいじるのは良くないはず…。
知りませんでした。
もっと基礎から勉強し直して、別の書き方など見つかり次第修正しようと思います。

Answer 1

解決した後に作業を進めてしまい、そこから不要なコードを削ったため余計な記述があるかも知れませんが、何とか自己解決しました。

import React from 'react'
import {useEffect, useState } from 'react'

function Modal(props) {
  
  const [scrollY, setScrollY] = useState(0);
  const [spb,setSpb] = useState(0);
  const [bodyHeight, setBodyHeight] = useState(0);

  window.addEventListener('scroll', () => {
      setSpb(window.scrollY);
  });

  useEffect(() => {
    if (props.active) {
      const y = window.scrollY;
      setScrollY(y);
      document.getElementById('body').style.overflow = "hidden";
      document.getElementById('body').style.height = "100vh";
      document.getElementById('body').scrollTo(0, spb);
      window[`scrollTo`]({ top: 0 })
    } else {
      document.getElementById('body').style.position = "";
      document.getElementById('body').style.top = "";
      document.getElementById('body').style.height = "";
      window.scrollTo(0, scrollY);
    }
  }, [props.active]);

  return (
    <>
      <ul className="navlist toggle_contents" style={{
        transitionDuration: '1.5s',
        opacity: props.active ? 1 : 0,
        zIndex: props.active ? 4 : -1,
        visibility: props.active ? 'visible' : 'hidden',
      }}
      tabIndex={'0'}>
        <li className="navitem current_page_item"><a href="#" tabIndex={'0'}>About</a></li>
        <li className="navitem"><a href="#" tabIndex={'0'}>Feature</a></li>
        <li className="navitem"><a href="#" tabIndex={'0'}>Blog</a></li>
        <li className="navitem"><a href="#" tabIndex={'0'}>Contact</a></li>
      </ul>
      <div id="space" style={{
        display: props.active ? "block" : "none",
      }}></div>
    </>
  )
}
 
export default Modal

document.bodyとかdocument.documentElementという記述は無くすためにBodyタグの直下にid="body" class="body"のdivを咬ませました。

スクロールの問題は、position:fixedをやめてoverflow:hiddenとheight:100vhとし、トップから必要分だけスクロールさせる事でモーダルを非表示にしてもスクロール位置が維持されるようにしたところ、意図した通りの動きになりました。

アドバイスをくださったhoshi-takanori様と、この質問を気にかけて下さった方にお礼を申し上げます。
ありがとうございました。