Help us understand the problem. What is going on with this article?

備忘録_iOS(fixed)

More than 3 years have passed since last update.

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の上にスクロールして画面をリフレッシュすることができなくなる。

参考にさせていただいた記事

https://noji.wpblog.jp/2016/11/30/%E3%80%90%E3%81%BE%E3%81%95%E3%81%AB%E5%BA%95%E3%81%AA%E3%81%97%E6%B2%BC%E3%80%91%E3%81%82%E3%81%AE%E3%80%8C%E5%B7%A6%E5%81%B4%E3%81%8B%E3%82%89%E5%87%BA%E3%81%A6%E3%81%8F%E3%82%8B%E3%83%A1%E3%83%8B/

y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした