HTML tablosu kullanarak küçük bir web tabanlı uygulama yapıyorum. Bu tablonun sıra dışı bir özelliği, üst sıra ve sol sütunun (excel'e benzer) sabitlenmiş olmasıdır. Bunu biraz jQuery ve CSS kullanarak gerçekleştirdim.Çalıştırmak için javascript'i zorla * önce * tarayıcı yeniden çizim (jsFiddle örneği)
Sorun şu ki, kodumu tetikleyen jQuery olayı $ (window) .scroll olayıdır ve bu olayın çağrıldığı kodun çalışması bitmeden önce tarayıcıların çoğunun (Chrome ve IE) sayfayı yeniden çizdiği açıktır. Sonuç olarak, sol sütun ve üst sıra, masanın geri kalanına "yetişmek" için bölünmüş bir saniye alır.
Sorunumu size göstermek için bir stripped down jsFiddle example sağladım. Not: Tablo çok küçük ve (nispeten konuşma) içerikten boş olduğunda gecikme çok farkedilemez. Yine de, orada (firefox kullanmadığınızı varsayarak) var. Bu gecikmeden kurtulmanın bir yolu var mı?
Teşekkürler!
Belki de rafın çalışma şeklini yanlış anladım, ama sorunum tamamen çözülmeyecek gibi görünüyor, çünkü benim problemim çok yakında çizilen çerçeveler içeriyor. Bu doğru mu? Yoksa almadığım bir şey mi var? – ihake
'requestAnimationFrame', bir yeniden boyamadan hemen önce komutlar vermenizi sağlar. Yani requestAnimationFrame'de değiştirdiğiniz her şey, bir sonraki rötuşta gösterilecektir. Web sayfası çizmek üzereyken tarayıcı tarafından çağrılan bir geri çağırmadır. Sorununuz, kaydırma işleminin boyandığında (şüphelendiğinizde) veya çok fazla kaydırma geri çağrısı ardı ardına yayınlanmasından sonra syncHeadColumns çağrılmasından kaynaklanmaktadır. Bu, çerçeve başına 1'den fazla olaydır. Bu görsel güncellemelerde gecikmeye neden olur (şahsen bunun daha olası olduğuna inanıyorum). Her durumda: 'requestAnimationFrame''in her ikisinde de yardımcı olabileceğine inanıyorum. –
Denemek istediğim, kaydırma olayından ziyade 'requestAnimationFrame' yerine' syncHeadColumns 'işlevini çağırmaktır. Bu, 'syncHeadColumns' için yapılan çağrıların miktarını azaltmalı, ancak başlıkları düzgün bir şekilde pozisyonda tutmalıdır. Ayrıca, henüz düzeltmediğinizde yeniden gönderme ve yeniden akış davranışının tarayıcılarda nasıl çalıştığını kontrol etmek isteyebilirsiniz. Değiştirildiklerinde yeniden akışa neden olan belirli elemanlar ve css özellikleri vardır. Bu, 'position: fixed' öğelerindeki çoğu öznitelik için geçerli olmamalıdır, ancak kodunuzda yeniden akışa neden olan bir şey eksik olabilir. –