55

モバイルサファリには固定要素に多くのバグがあることは理解していますが、ほとんどの場合、必要なテキスト入力を下部の固定ナビゲーションに追加するまで、レイアウトを正しく機能させることができました. ユーザーがテキスト入力要素に注目し、仮想キーボードが表示されると、通常は常にページの下部に固定されている私のナビゲーションが、ページの真ん中の本当に奇妙な場所にジャンプします。

ここに画像の説明を入力

この投稿にコードをいくつか追加したいと思いますが、どこから始めればよいかわかりません。そのナビゲーションは下部に固定され、左下に配置され、幅は 0、100% です。そこからは、何が起こっているのかわかりません。モバイル サファリのバグだとしか思えません。

また、テキスト入力要素がフォーカスされ、仮想キーボードが開いている間のみ、固定された位置を失い、相対的になるように見えます。

4

11 に答える 11

20

http://dansajin.com/2012/12/07/fix-position-fixed/これは提案された解決策の 1 つです。一見の価値があるようです。

要するに、入力が編集されたときに要素を設定し、その要素が赤のときに要素をリセットfixedしますposition:absolutefocusblur

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
}

と

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}
于 2013-04-23T14:46:33.020 に答える
6

私も同様の問題を抱えていましたが、次の css クラスを入力フォーカスの body 要素に追加し、フォーカス解除時に再度削除することで回避策を見つけました。

.u-oh {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}
于 2015-08-24T01:34:49.420 に答える
4

sylowgreen が行ったことから、鍵はbodyに入るときにを修正することinputです。したがって：

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});
于 2016-01-16T00:38:55.937 に答える
2

次のように JavaScript を追加します。

$(function() {
  var $body;
  if ('ontouchstart' in window) {
    $body = $("body");
    document.addEventListener('focusin', function() {
      return $body.addClass("fixfixed");
    });
    return document.addEventListener('focusout', function() {
      $body.removeClass("fixfixed");
      return setTimeout(function() {
        return $(window).scrollLeft(0);
      }, 20);
    });
  }
});

次のようにクラスを追加します。

.fixfixed header{ 
    position: absolute; 
}

この記事を参照できます: http://dansajin.com/2012/12/07/fix-position-fixed/

于 2013-12-17T09:30:19.293 に答える
0

私のDOMは複雑で、動的な無限スクロールページがあるため、これらのソリューションはどれもうまくいきませんでした。

背景:固定ヘッダーと、ユーザーがスクロールするとその下にくっつく要素をさらに下に使用しています。この要素には検索入力フィールドがあります。さらに、前方および後方スクロール中に動的ページを追加しました。

問題: iOS では、ユーザーが固定要素の入力をクリックすると、ブラウザがページの一番上までスクロールしていました。これにより、望ましくない動作が発生しただけでなく、ページの上部に動的ページが追加されました。

予想される解決策:ユーザーがスティッキー要素の入力をクリックしても、iOS ではスクロールしません (まったくありません)。

解決：

     /*Returns a function, that, as long as it continues to be invoked, will not
    be triggered. The function will be called after it stops being called for
    N milliseconds. If `immediate` is passed, trigger the function on the
    leading edge, instead of the trailing.*/
    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

     function is_iOS() {
        var iDevices = [
          'iPad Simulator',
          'iPhone Simulator',
          'iPod Simulator',
          'iPad',
          'iPhone',
          'iPod'
        ];
        while (iDevices.length) {
            if (navigator.platform === iDevices.pop()) { return true; }
        }
        return false;
    }

    $(document).on("scrollstop", debounce(function () {
        //console.log("Stopped scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'absolute');
                $('#searchBarDiv').css('top', yScrollPos + 50 + 'px'); //50 for fixed header
            }
            else {
                $('#searchBarDiv').css('position', 'inherit');
            }
        }
    },250,true));

    $(document).on("scrollstart", debounce(function () {
        //console.log("Started scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'fixed');
                $('#searchBarDiv').css('width', '100%');
                $('#searchBarDiv').css('top', '50px'); //50 for fixed header
            }
        }
    },250,true));

要件: startsroll および stopscroll 関数が機能するには、JQuery モバイルが必要です。

スティッキー要素によって作成されたラグを滑らかにするために、デバウンスが含まれています。

iOS10でテスト済み。

于 2016-11-30T00:19:06.983 に答える