web-dev-qa-db-ja.com

Mobile Safariの位置を修正

Mobile Safariでビューポートに対して要素を固定して配置することはできますか？多くの人が指摘しているように、position: fixedは機能しませんが、Gmailは、私が望んでいるものに近いソリューションを提供しました。メッセージビューのフローティングメニューバーを参照してください。

JavaScriptでリアルタイムのスクロールイベントを取得することも合理的なソリューションです。

javascriptiphonecssmobile-safari
67
Sophie Alpert

iOS 5には position：fixedのサポート があります。

36
vava

この固定位置のdivは、スクロール時にdivをページの下部に移動するわずか2行のコードで実現できます。

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};
74
Abhijit Kalamkar

この問題に対するGoogleのソリューション を参照してください。基本的にJavaScriptを使用してコンテンツを自分でスクロールする必要があります。 Sencha Touch は、非常にパフォーマンスの高いマナーでこの動作を実現するためのライブラリも提供します。

10
JoshNaro

それは私のために働いた：

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

（44は私のバーの高さです）

バーはスクロールの最後でのみ移動しますが...

6
Raphael Petegrosso

これは興味があるかもしれません。 Apple Devサポートページ。
http://developer.Apple.com/library/ios/#technotes/tn2010/tn2262/

ポイント「4.CSS固定ポジショニングに依存するコードの変更」を読むと、非常に正当な理由があることがわかります。 Appleは、固定位置を静的として扱うことを意識的に決定しました。

5
iDevGeek

Gmailはタイマーのスクロール位置を追跡し、それに応じてdivを再配置するだけだと思います。

私が見た中で最高の解決策は doctyper です。

Onscroll要素を移動するより単純なjQueryソリューション： link

4
rpetrich

モバイルSafariで固定要素を使用したスクロールを模倣するjQueryプラグインであるtouch-scrollを使用してみてください。 https://github.com/neave/touch-scroll

IOSデバイスの例を http://neave.github.com/touch-scroll/ でご覧ください

または、代わりにiScrollを使用します。 http://cubiq.org/iscroll

3
neave
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

また、height=device-heightは、このメタタグに存在しないため、通常はページに存在しない追加のフッターパディングの防止に役立ちます。メニューバーの高さがビューポートの高さに追加され、固定の背景がスクロール可能になります。

1
Talvi Watia

これは私がやった方法です。ページを下にスクロールすると、ヘッダーの下にあるnavブロックがあり、ウィンドウの上部に「固定」されます。上にスクロールすると、navはその場所に戻ります。非モバイルプラットフォームとiOS5の場合、CSSでposition：fixedを使用します。他のモバイルバージョンでは、設定される前に画面のスクロールが停止するまで「遅延」があります。

// css
#sticky.stick {
    width:100%;
    height:50px;
    position: fixed;
    top: 0;
    z-index: 1;
}

// jquery 
//sticky nav
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;

      if (window_top > div_top)
        $('#sticky').addClass('stick');
      else
        $('#sticky').removeClass('stick');
     }

$(window).scroll(function(event){

    // sticky nav css NON mobile way
       sticky_relocate();

       var st = $(this).scrollTop();

    // sticky nav iPhone Android mobile way iOS<5

       if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
            //do nothing uses sticky_relocate() css
       } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

            var window_top = $(window).scrollTop();
            var div_top = $('#sticky-anchor').offset().top;

            if (window_top > div_top) {
                $('#sticky').css({'top' : st  , 'position' : 'absolute' });
            } else {
                $('#sticky').css({'top' : 'auto' });
            }
        };
1
gary

ここでは、CSS位置固定+そこにあるバージョンをサポートする（モバイル）ブラウザーを確認できます。

http://caniuse.com/css-fixed

0
Anna Smother

このWebアプリには、固定ヘッダーが必要です。私たちは最新のブラウザのみをサポートする必要があるという幸運に恵まれていますが、この分野でのSafariの動作は私たちに本当の問題を引き起こしました。

他の人が指摘しているように、最善の解決策は、独自のスクロールコードを書くことです。ただし、iOSでのみ発生する問題を修正する努力を正当化することはできません。特にQuirksModeが示唆するように、Appleは「position：fixed」の解釈で単独で動作するため、Appleがこの問題を解決することを期待する方が理にかなっています。

http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html

私たちのために働いたのは、ユーザーがズームしたかどうかに応じて「position：fixed」と「position：absolute」を切り替えることです。これにより、「フローティング」ヘッダーが、使いやすさにとって重要な予測可能な動作に置き換えられます。ズームしたときの動作は私たちが望むものではありませんが、ユーザーはズームを逆にすることでこれを簡単に回避できます。

// On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;".
header = document.createElement( "HEADER" );
document.body.appendChild( header );
if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) {
    addEventListener( document.body, function( event ) {
        var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth;
        header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed";
    });
}
0
Heman