モーダルを開いたとき、デフォルトでは背景がスクロールします。
違和感を持つ方も多いので、背景がスクロールしないように固定する方法をご紹介します。
ただし、仕様上、「背景の部分をクリックしてモーダルを閉じる」が動かなくなります。
引き続き、×ボタンをクリックすれば閉じられます。
モーダルよりもフルスクリーンメニュー向きですね🙂
諸注意多めです🙇♀️
違和感を持つ方も多いので、背景がスクロールしないように固定する方法をご紹介します。
ただし、仕様上、「背景の部分をクリックしてモーダルを閉じる」が動かなくなります。
引き続き、×ボタンをクリックすれば閉じられます。
モーダルよりもフルスクリーンメニュー向きですね🙂
諸注意多めです🙇♀️
Before
After
After
【注意】
※モーダルを特殊な用途に利用している場合や、モーダル内のレイアウト/カスタマイズによってはうまく動かない可能性があります。
※STUDIOのアップデートによって動かなくなる可能性があります
※スクロール時、モーダルが1px上下します(普通に使う分には気にならないはずです)
※Freeプランでは使えません
※ライブプレビューでは動作しません
※一部非対応のブラウザがあります
※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>
もしもっと良い方法をご存知の方がいらっしゃいましたら、投稿をお待ちしてます🎉

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