スクロールでコンテナの位置を調整する

Question

divコンテナ内の要素のセットが常にビューポートに存在するようにしようとしています。私は2つの異なるアプローチを試しましたが、問題を再描画するように見えます。

質問：パフォーマンスを改善し、顕著な視覚的副作用を排除するための主要な最適化はありますか？そうでない場合は、代替アプローチになりますか？

最初のアプローチ：

$(viewport).scroll(function() 
    { 
     m_grid.css({ 'marginTop': viewport.scrollTop() + 'px' }); 
    }) 

この1つは、ユーザーに明らかな小さな揺れ効果を引き起こします。

第二のアプローチ：divの内容を下記及び上記

• 置き、スクロール可能なコンテナの未使用スペースを埋めるために少し初歩的な数学でそれらを縮小して展開します。

このアプローチの問題点は、一定のサイズ変更の可能性が最も高いコンテンツのエッジでフリッカーが発生することでした。

第三のアプローチ：

• 置き、元のスクロールバーが実際のコンテナに転送し、それにイベントをスクロール、単純なバインドになる場所の真上にスクロール動作を模倣DIV。

これは、実際にスクロールを実行するdivが虚偽であるため、マウスホイールはビューポート内の要素にカーソルを置いたときにフォーカスがないため使用できません。

改善や代替アプローチに関する考えはありますか？パフォーマンス中心のものでなければなりません。

Answer 1

これにはJavaScriptは必要ありませんが、CSSで行うことができます。たとえば：

#viewport { 
    position: relative; 
} 

#m_grid { 
    position: fixed; 
    top: 0px; 
} 

デビッド・ウォルシュは、アクションにposition: fixedのdemo pageを持っています。