2

シンプルな「固定ヘッダー」テーブルを実装しようとしています。理論的には CSS のみでこれを実行できることはわかっていますが、OSX Lion とその消えるスクロールバーに関してはうまく機能しません。だから私はjQueryでそれをやっています。

アプローチは簡単で、わずか 1.5 行のコードです。

$('.inbox').scroll(function() {

    $(this).find('.inbox-headers').css('top', $(this).scrollTop());

});

デモ。

これは Firefox では問題なくスムーズに動作しますが、Webkit ブラウザーではひどく遅れます。なぜそれが起こっているのですか? また、このコードを最適化するにはどうすればよいですか? または、問題に別の方法でアプローチすることもできます。

4

3 に答える 3

8

「スクロール」イベントは非常に頻繁に発生します。一部のブラウザーでスクロールしながら DOM を変更している場合、常に追いつくのは非常に困難です。

できることは、次のいずれかです。

  1. あなたの場合、position: fixed;良い選択肢かもしれません。
  2. そうでない場合は、イベント ハンドラーに今後 100 ミリ秒程度のタイマーを開始させ、プロセス内の以前のタイマーをキャンセルします。そうすれば、スクロールが停止または一時停止した後にのみ DOM が更新されます。
  3. 継続的な更新が必要な場合は、更新を行うときにタイムスタンプを追跡し、一定時間 (100 ミリ秒など) 未満の場合はハンドラーで何もしません。
于 2012-06-17T23:15:17.753 に答える
0 
function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, 
            args = arguments,
            later = function() {
                timeout = null;
                func.apply(context, args);
            };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
$('.inbox').scroll(debounce(function() {
    $(this).find('.inbox-headers').css('top', $(this).scrollTop());
}, 100));

これは、このような状況でよく使用する小さなデバウンス機能です。

于 2012-06-17T23:33:08.303 に答える
0

静的ヘッダーを作成する最善の方法は、ヘッダーとテーブルの本体を厳密に分離することです。

次に、overflow:scroll スタイルを .body DIV のみに適用する必要があります

  1. 絶対配置なし
  2. スクロールイベントなし

テーブルが非常に広い場合は、いずれにしてもスクロールイベントを使用する必要があります

于 2012-06-17T23:40:35.883 に答える