7
HTMLテーブルを使用して小さなWebベースのアプリケーションを構築しています。この表の珍しい特性の1つは、上部の行と左の列が固定されていることです（これはExcelに似ています）。私は少しjQueryとCSSを使ってこれを達成しました。ブラウザを再描画する前にjavascriptを実行する*（jsFiddleの例）
問題は、自分のコードをトリガするjQueryイベントが$（window）.scrollイベントであり、このイベントによって呼び出されるコードが実行を終了する前にほとんどのブラウザ（ChromeとIE）がページを再描画することです。その結果、左の列と一番上の行は、テーブルの残りの部分に「追いつく」ために分割されます。
私はあなたに私の問題を示すためにstripped down jsFiddle exampleを提供しました。 注：テーブルが非常に小さく、（相対的に言えば）内容が空である場合、遅れはそれほど顕著ではありません。それにもかかわらず、それはそこにあります（あなたがFirefoxを使用していないと仮定します）。この遅れを取り除く方法はありますか？
ありがとうございます！
おそらく私はrafの仕組みを誤解しているかもしれませんが、私の問題はフレームがあまりにも早く描かれてしまうため、私の問題を完全には解決できないようです。そうですか？それとも私は何か得ていないのですか？ – ihake
'requestAnimationFrame'では、再描画の直前にコマンドを発行できます。したがって、requestAnimationFrameで変更したものは、次の再描画で表示されます。ブラウザがWebページを描画しようとしているときに呼び出されるコールバックです。あなたの問題は、スクロールが描画された直後（疑わしいもの）、またはスクロールコールバックが多すぎるためにsyncHeadColumnsを呼び出すことが原因である可能性があります。つまり、フレームごとに1つ以上のイベントが発生します。これは視覚的な更新の遅れを引き起こします（個人的にはこれがより起こりそうです）。いずれにしても、私は 'requestAnimationFrame'が両方を助けることができるはずです。 –
私は、 'scrollHeadColumns'を' requestAnimationFrame'からスクロールイベントではなく呼び出すことを試みます。それは 'syncHeadColumns'への呼び出しの量を減らすべきですが、ヘッダーが円滑にその位置に保持されます。また、ブラウザに再描画とリフローの動作がどのように機能しているかを確認したい場合もあります。変更されたときにリフローを引き起こす特定の要素属性とCSS属性があります。これは 'position：fixed'要素の大部分の属性に当てはまるべきではありませんが、おそらくあなたのコードにリフローを引き起こす何かがありません。 –