モーダルを開いたとき、デフォルトでは背景がスクロールします。
違和感を持つ方も多いので、背景がスクロールしないように固定する方法をご紹介します。

ただし、仕様上、「背景の部分をクリックしてモーダルを閉じる」が動かなくなります。
引き続き、×ボタンをクリックすれば閉じられます。
モーダルよりもフルスクリーンメニュー向きですね🙂
諸注意多めです🙇‍♀️

Before

After


【注意】

※モーダルを特殊な用途に利用している場合や、モーダル内のレイアウト/カスタマイズによってはうまく動かない可能性があります。
※STUDIOのアップデートによって動かなくなる可能性があります
※スクロール時、モーダルが1px上下します(普通に使う分には気にならないはずです)
※Freeプランでは使えません
※ライブプレビューでは動作しません
一部非対応のブラウザがあります

コード

下記を、サイト設定のhead内に記述します。
<style>
  .design-canvas__modal {
    overflow-y: auto;
    overscroll-behavior: none;
  }
  .studio-canvas,
  .design-canvas__modal {
    pointer-events: all !important;
  }
  .design-canvas__modal::-webkit-scrollbar {
    display: none;
  }
  .design-canvas__modal .studio-canvas {
    height: calc(100% + 1px) !important;
     -ms-overflow-style: none;
  }
</style>


もしもっと良い方法をご存知の方がいらっしゃいましたら、投稿をお待ちしてます🎉