safariでのメニューバーの挙動
safariの下部にあるメニューバーはスクロールに応じて表示・非表示が切り替わる。
この時の高さを取得する時に注意しておく必要がある。
解決策
下記のようにして高さを取得する
// 非jQuery
var height = window.innerHeight;
下記のjQueryを使用して下記のように高さを取得するとメニューバーの分の高さが含まれない
// jQuery
var height = $(window).height();
safariでのスクロール問題
通常、body要素にoverflow: hidden;を設定することでスクロールを無効化できる。
しかし、safariではそれを利用することはできず、普通にスクロールできてしまう。
解決策
これを解決する一番簡単な方法はtouchmove.noScrollイベントを利用してスクロールを止めるだと思う。
ただ、この設定をするとすべてのスクロールイベントが無効化される。
例えば、内包する要素をスクロールさせたいときはこの方法では実現できない。
内包する要素をスクロールさせたいときには下記のように設定することでスクロールイベントを無効化せずにスクロールさせないように設定できる
var current_scrollY;
// OPEN MODAL
$( '.js-open' ).on( 'click', function(){
current_scrollY = $( window ).scrollTop();
// 固定処理
$( 'body' ).css( {
position: 'fixed',
width: '100%',
top: -1 * current_scrollY
});
} );
// CLOSE MODAL
$( '.js-close' ).on( 'click', function( e ){
// リセット処理
$( '#wrapper' ).attr( { style: '' } );
$( 'html, body' ).prop( { scrollTop: current_scrollY } );
});
上記のようにして、body要素に対してposition: fixed;を適用してスクロールを無効化したように見せる。
ただ、body要素にposition: fixed;を設定後、解除するとページの一番上まで強制的に戻ってします。
これでは使い勝手が非常に悪いので、jsを利用して高さを記憶しておく。
注意点
body要素に対して、overflow: hidden;を設定するとスクロールを無効ができるが、これを設定するとchromeの上にスクロールして画面をリフレッシュすることができなくなる。