Code

2016年7月9日土曜日

iOS 9 HTML5 モーダル スクロールできない問題

TL; DR: iOS で modal を表示しても、body が相変わらずスクロールできるの修正方法:modal-open クラスに positive: relative を追加すれば、修正されます。
 Bootstrap などを使うと、簡単に Modal ウィンドウが作れるようになります。基本的に CSS もあって、関数を呼び出すだけです。そのモーダルウィンドウは一般的に画面の真ん中に、スクロールできないようになっています。これは modal-open というクラスを body tag に設定することで、body の overflow を hidden に設定するだけでできています。
 そうすると、モーダルウィンドウ自身はスクロールできるし、いつも画面の真ん中にあります。ユーザーに操作を提示しているため、最適していると思います。
 iOS 9 がリリースされて、一つの問題は発生しました。body のスクロール禁止が効かなくなりました。
 対応方法としては
    modal-open { overflow: hidden; position: relative; }
 にして、元と同じように動きます。PC ではこの問題が起きません。

 他の修正方法としては、html, body と一緒に overflow: hidden を設定します。

 それでは。

0 件のコメント:

コメントを投稿