Google Chrome'daki büyük (ish) html tablosunun yavaş kaydırma davranışı

Kaydırma çubuklarıyla büyük bir HTML tablosu (yaklaşık 5000 satır) oluşturmaya çalışıyorum ve bu tabloyu içine ekleyebilirim. memnun.Google Chrome'daki büyük (ish) html tablosunun yavaş kaydırma davranışı

O Firefox 47 ve IE 11 iyi çalışır ama sadece doküman gövdesine tabloyu eklerseniz 59.

WORKING DEMO

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test page</title> 
    </head> 

    <body> 
     <div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
     <script> 
      let table = '<table style="table-layout: fixed; width: 3000px">'; 
      table += '<thead>'; 
      table += '<tr>'; 
      for(let i=0; i < 30; i++) { 
       table += '<th style="width: 100px">#' + i +'</th>'; 
      } 
      table += '</tr>'; 
      table += '</thead>'; 
      table += '<tbody>'; 
      for(let i=0; i < 5000; i++) { 
       table += '<tr>'; 
       for(let j=0; j < 30; j++) { 
        table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
       } 
       table += '</tr>'; 
      } 
      table += '</tbody>'; 
      table += '</table>'; 
      document.getElementById('test').innerHTML = table; 
     </script> 
    </body> 

</html>

Ancak Chrome'da Tomardaki bir halsiz davranışa sahip

, kaydırma davranışı, test ettiğim 3 tarayıcıda düzgün (ancak yerel dev sunucumdaki kodu çalıştırırken bu davranışı gözlemleyebiliyordum; tabloyu bir JSFiddle'daki belge gövdesine eklerseniz Chrome'un yavaş davranışı yeniden görünür) .

Sorum, Chrome'un bu durgun davranışına neden olan nedir ve daha akıcı bir kaydırma tablosu almak için ne yapabilirim?

* Düzenleme: style="position: relative"'u <td> kod bloğundan kaldırdım çünkü Fiddle'da böyle yaptım. Bu stil ile deney yapıyordum, çünkü tablo öğeleri nispeten konumlandırıldığında IE'nin kaydırma üzerinde durma eğiliminde olduğunu fark ettim. Nihai amacım, çok sayıda satır içeren kaydırılabilir bir gövdeye sahip sabit/dondurulmuş bir başlık ile büyük bir html tablosu oluşturmaktır.

kaynak

2017-07-17 Moaning Neighbors

, FF ve Edge ile hiçbir sorun varken. Bununla birlikte, örneğinizdeki dış div - to ekine "taşma: kaydırma" ekleme - sorunu çözdü. neyse: belki sadece aradığınız ne slickgrid bakabilirsiniz. –

Tabloya transform: translate3d(0, 0, 0) eklemeye çalışın. Aşağıda bir örnek verilmiştir. Ancak bu hile yaşlanıyor. Bununla ilgili ilanlar 2012 yılına kadar geri dönüyor. Örneğin, bkz. this posting.

Halen donanım hızıyla [...] gemi tarayıcılar; Sadece bir DOM elemanının bundan fayda sağlayacağına dair bir gösterge olduğunda kullanırlar. CSS, ile en güçlü gösterge, bir öğeye bir 3D dönüşümün uygulanıyor olmasıdır. Benim şirkette

, neredeyse her büyük liste için kullanabilirsiniz. Çoğunlukla iyi çalışıyor. Başka bir çözüm sanallaştırma olurdu.

let table = '<table style="table-layout: fixed; width: 3000px">'; 
 
table += '<thead>'; 
 
table += '<tr>'; 
 

 
for(let i=0; i < 30; i++) { 
 
    table += '<th style="width: 100px">#' + i +'</th>'; 
 
} 
 

 
table += '</tr>'; 
 
table += '</thead>'; 
 
table += '<tbody>'; 
 

 
for(let i=0; i < 5000; i++) { 
 
    table += '<tr>'; 
 
    for(let j=0; j < 30; j++) { 
 
    table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
 
    } 
 
    table += '</tr>'; 
 
} 
 

 
table += '</tbody>'; 
 
table += '</table>'; 
 
document.getElementById('test').innerHTML = table; 
 
document.getElementById('test2').innerHTML = table;

#test { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
}

<h2>With translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
 
<h2>Without translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

(veya full snippet) Chrome (64) ile aynı sorunu yaşıyorsunuz

kaynak

2017-07-18 09:08:24 SVSchmidt

Gecikme için özür dilerim, sanallaştırmanın ne olduğunu ve doğru bir şekilde uygulamaya çalıştığımı okuyordum. Belge performansımda büyük bir fark yaratıyor. İşte bir [** ÇALIŞMA DEMO **] (https://jsfiddle.net/ddqw6tg3/3/). Yine benim tablo elemanı sadece kullanıcı kaydırma çubuğunu sürükler eğer düzgün kayar veya sabit sütun (demo 10 ilk) gezinip ederken fare tekerleğini kullanıyorsa. Ancak bu davranış, test ettiğim 3 tarayıcıda tutarlı değil. Yalnızca Chrome, fare tekerleği ile yumuşak bir kaydırma sağlar. –

Üzgünüm ama iki nedenden dolayı bu konuda downvote zorunda: 1) diyorsun Cevaplarınızda "dönüşümü eklemeyi deneyin., 0) t a b l e translate3d (0, 0". Ama ahbap, masanın üst divasına ekliyorsun! (bir yerden kopyalandı mı?) 2) Dönüşüm, hile yapmaz, taşma: kaydırma (en azından Chrome 64 ile). –

Google Chrome'daki büyük (ish) html tablosunun yavaş kaydırma davranışı

cevap

İlgili konular