iOS Safari Overscrolling：プルダウンとバウンス

Question

私のチームと私は、スクロールしない固定ヘッダーを持つWebアプリケーションを開発しています。

iOSのオーバースキャンを処理するには、負方向のスクロールを検出し、固定ヘッダを静的な位置に再配置してページの残りの部分とともにスクロールさせる必要があります。
我々はwindowにjQueryのスクロールハンドラを結合することによって、この操作を行います。これがうまく機能

$(window).scroll(function() { 
    if ($(window).scrollTop() < 0) { 
     // position static header postioning in order 
     // let the header behave correctly when overscrolling 
    } 
}); 

ページを手動で引っ張られたときに、（ドラッグ）ダウン。 しかし、すべてのiOSユーザーが知っているように、速度を上げて下向きの位置からページをスクロールすると、ページが一番上に到達すると、ページがはね返ります（overscrolls）。

この場合、スクロール処理は機能しません。私は2つの理由を想像することができます現時点では

は、なぜこの異なる現象が発生：

• 急速に上向きにスクロールして、ページのバウンスを行うことを、流体ハンドリング
• を確保するためにSafariのJSエンジンの速すぎます手動でウェブページをプルダウンするのと同じように技術的に上にスクロールするとバウンスしますか？ $(window).scrollTop()に関しては？

私のスクロール処理をどのようにして両方のケースで行うかについてのヒントはありますか？

Answer 1

CSSで動作しない場合は、描画ループを作成し、ループが実行されるたびに、ユーザーがスクロールした距離に等しい水平オフセットを配置します。

CSSが動作しない場合は基本的に、あなたのJSは、次のようになります。

var head = document.getElementById("header"); 
//head now has our header 
head.style.position = "relative"; 
//and now, we can manipulate it's position 
function draw(){ 
    head.style.top = window.pageYOffset; 
    //all that's left to do is do this each and every frame. 
} 

そして、あなたはドローループを作る方法がわからない場合は、ここでのコードは次のとおりです。

var frameRate = 60; 
var frameCounter = (function(){ 
    var counter = 0; 
    return function(){ 
     counter ++; 
     if(counter > frameRate/1000){ 
      counter -= frameRate/1000; 
      draw(); 
     } 
    } 
})(); 
setInterval(frameCounter, 1); 

Answer 2

これはiOS 9.3で解決されました。新しいメタタグオプション

<meta name="viewport"content="width=device-width,shrink-to-fit=no">