小さなデバイスで非常にうまくスクロールする

Question

私はbackground-attachment: fixedが非常に退屈で何度も尋ねられていることを知っていますが、私はいくつかの助けを求めています。私は3ヶ月間コーディングをしていて、友人のために何かをデザインしています。結局私のポートフォリオに追加します。ウェブサイト lengtest.comにリンクしてください。

だから、私はモバイルノートでは固定されていないコードを見つけることができましたが、遅れなくス​​クロールしません。誰も助けることができますか？または、私は新しいページをデザインすべきですか？私のデスクトップサイトは正常です。再生しているだけの携帯電話やipads。

CSS：（jQueryのを使用して）

#container { 
    display: inline-block; 
    background-image:url("lengcover2.jpg"); 
    background-attachment:scroll; 
    background position:left top; 
    background-size:cover; 
    width:100%; 
    height:800px; 
} 

はJavaScript：

$(window).scroll(function() { 
    var scrolledY = $(window).scrollTop(); 
    $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px'); 
}); 

Answer 1

一部のブラウザでは、イベントが発火したときの違いによるスクロールアクションをレンダリング難しく時間を持つことができます。一部のモバイルデバイスは、アクション全体が完了するまで、実際にはスクロールをアクティブにしません。また、他のデバイスは、連続して発射しようとしているかもしれません。これを回避する一般的な方法の1つは、スクロールしたい機能/アクションをタイマー内に設定することです。

var timer; 
$(window).scroll(function() { 
    if(timer) { 
     window.clearTimeout(timer); 
    } 

    timer = window.setTimeout(function() {` 
     var scrolledY = $(window).scrollTop(); 
     $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px'); 
    }, 100); 
}); 

ここでは、スクロールが発生するたびにタイマーのチェックが開始されることがわかります。タイマーがすでにオフに設定されている場合は、タイマーがクリアされます。その後すぐに、新しいタイマーが設定されます。

注：少なくとも、あなたのバックグラウンドイメージコールとおそらくあなたのバックグラウンドポジションをトランジションコールすることをおすすめします。