Micromodal.jsでモーダルウィンドウを実装しているが、開いたウィンドウが常に下スクロールされた状態で開かれるため、上スクロールされた状態で開きたい

Question

実現したいこと

Micromodal.jsでモーダルウィンドウを実装しているが、開いたウィンドウが常に下スクロールされた状態で開かれるため、上スクロールされた状態で開きたい

発生している問題・分からないこと

コードのどの部分を触ったら、モーダルウィンドウが常に上スクロールの状態で開くことができるのかが分からない

該当のソースコード

              <div id="modal-1" class="modal" aria-hidden="true">
                <div class="overlay" tabindex="-1" data-micromodal-close> 
                  <div class="overlayInner" role="dialog" aria-modal="true" aria-labelledby="modal-1-title"> 
                    <div class="cancelIcon" aria-label="Close modal" data-micromodal-close>
                      <img src="img/細いバツのアイコン (1) 1.png" alt="">
                    </div>
                    <div role="document" id="modal-1-content">
                      <div id="modal-1-title">
                        <p class="eventHeading">イベント情報</dt>
                        <p class="eventDays">2024.06.03</dt>
                      </div>
                      <h3>住宅設計相談会を実施します。弊社建築士と将来の家造りを真剣に考えませんか？</h3>
                      <div class="modal-1Image">
                        <img src="img/news01 1.jpg" alt="">
                      </div>
                      <div class="modalText">
                        <p>みなさま、こんにちは！弊社では、住宅設計相談会を開催することになりました！将来の家造りを真剣に考える皆様、ぜひご参加ください。</p>
                        <br>
                        <p>家を建てるというのは、人生の中で最も重要なイベントの一つです。そのためには、慎重な計画と適切なアドバイスが欠かせません。そこで、弊社の建築士が皆様のお悩みやご要望をお聞きし、最適な家づくりの提案をさせていただきます。</p>
                        <br>
                        <p>住宅設計相談会では、以下のようなことについてご相談いただけます：</p>
                        <br>
                        <ul>
                          <li>・理想の間取りやデザインについて</li>
                          <li>・予算や資金計画の相談</li>
                          <li>・土地選びや法的手続きについてのアドバイス</li>
                          <li>・新しい住宅技術や省エネルギーの取り入れ方について</li>
                        </ul>
                        <br>
                        <p>また、相談会に参加いただいた方には、特別なサービスやプレゼントもご用意しています。家造りに関するご質問や疑問点がある方は、ぜひこの機会にお気軽にご参加ください。</p>
                        <br>
                        <p>弊社の建築士が、皆様のご要望にお応えし、一緒に理想の家づくりを実現するお手伝いをさせていただきます。ぜひお越しください！</p>
                      </div>
                      <div class="btn">
                        <button aria-label="Close modal" data-micromodal-close>
                          <p>閉じる</p>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

body main .newsArea .newsInner .eventInformation .modal {
  display: none;
}
body main .newsArea .newsInner .eventInformation .modal.is-open {
  display: block;
}
body main .newsArea .newsInner .eventInformation .modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner {
  position: relative;
  background-color: #fff;
  padding: 16px 102px 24px;
  width: 60%;
  height: 95vh;
  overflow-y: auto;
  box-sizing: border-box;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner .cancelIcon {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner .cancelIcon img {
  width: 100%;
  height: 100%;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div #modal-1-title {
  display: flex;
  margin-bottom: 16px;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div #modal-1-title .eventHeading {
  font-size: 14px;
  line-height: 23px;
  color: #4282B8;
  border: 1px solid #4282B8;
  width: 115px;
  height: 23px;
  text-align: center;
  margin-right: 16px;
  padding: 0;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div #modal-1-title .eventDays {
  font-size: 14px;
  line-height: 1;
  color: #4282B8;
  align-self: center;
  padding: 0;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div h3 {
  font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
  line-height: 1.8;
  color: #000000;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .modal-1Image {
  width: 100%;
  margin: 16px 0 35px;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .modal-1Image img {
  width: 100%;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .modalText p {
  font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
  font-weight: 400;
  line-height: 1.8;
  color: #000000;
  padding-top: 0;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .modalText ul li {
  font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
  font-weight: 400;
  line-height: 1.8;
  color: #000000;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .btn {
  width: 240px;
  height: 60px;
  border: 1px solid #4282B8;
  background-color: #4282B8;
  border-radius: 10px;
  text-align: center;
  margin: 61px auto 0;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .btn button {
  position: relative;
  width: 100%;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .btn button p {
  font-size: 16px;
  line-height: 60px;
  padding-top: 0;
  color: #FFFFFF;
}
body main .newsArea .newsInner .eventInformation .modal .overlay .overlayInner div .btn button::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  right: 25px;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

解消することができなかった

補足

特になし

Comments

[juner]

途中のhtml構造が無いとか、 Micromodal の呼び出し条件が不明とか、エスパーしますけれど 再現するとこんな playground でしょうか？
https://livecodes.io/?x=id/4e4wr7m69jm
（※本来はそういうところも質問文上のソースに書いてほしいところ）

micromodal は version 0.4.10 であっていますでしょうか？
とりあえず事象は再現したのでニュアンスは把握しました。

Answer 1

Micromodal の 初期化関数に onShow という モーダル表示時のイベントがあります。

micromodal configuration

スクロールが発生しているのは role=dialog な要素の様なので下記の様に対象の要素のスクロール位置を調整してみてはいかがでしょうか？

import MicroModal from "https://cdn.jsdelivr.net/npm/micromodal@0.4.10/+esm";
MicroModal.init({
  onShow: (dialog, opener, event) => {
    // role=dialog の 要素がそのダイアログに含まれているのであれば、
    // その要素の scrollTop を 0 に設定する
    const $dialogRoleElement = dialog.querySelector("[role=dialog]");
    if ($dialogRoleElement) $dialogRoleElement.scrollTop = 0;
  },
});

playground