iOS Safariでも下までスクロールするモーダルの作り方
iOS Safariでモーダルを表示した際、作り方によっては画面下部のツールバーが表示されているとモーダルを下までスクロールすることができないことがあります。
おそらくheightのとり方に問題がありそうで、width: 100vw; height: 100vh;で設定しているときに発生しました。
それをtop,right,bottom,leftにすることで解決することができました。
コードとしては下記のようになります。
<div class="modal">
<div class="modal_background"></div>
<div class="modal_content_wrap">
<div class="modal_content">モーダル</div>
</div>
</div>
<style>
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: scroll;
}
.modal_background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* モーダルをセンタリングするため */
.modal_content_wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modal_content {
height: 1000px;
}
</style>
ちなみに元の作りは下記のようにしていました。
<style>
.modal {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
overflow: scroll;
}
</style>
Author And Source
この問題について(iOS Safariでも下までスクロールするモーダルの作り方), 我々は、より多くの情報をここで見つけました https://qiita.com/enbu/items/ad8b386173d1a09120ff著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .