Google Chromeの大きな（ish）htmlテーブルのスクロール動作

スクロールバーを使用して大きなHTMLテーブル（約5000行）を作成しようとしています。そのテーブルを<div>に挿入することを考えました。喜んだ。Google Chromeの大きな（ish）htmlテーブルのスクロール動作

これは、Firefox 47にし、IE 11で正常に機能しますが、私はちょうど文書本体にテーブルを追加する場合はクローム59

<!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>

のスクロールの低迷行動を持っています、私がテストした3つのブラウザではスクロールの動作はスムーズです（ただし、ローカルの開発サーバーでコードを実行しているときにしかこの動作を観察できませんでしたが、JSFiddleのドキュメント本体にテーブルを追加するとChromeの動作が遅くなります）。

私の質問は、このChromeの動作が鈍っている可能性があります。スムーズなスクロールテーブルを得るにはどうすればよいですか。

*編集：私はコードブロック内の<td>からstyle="position: relative"を削除しました。これは、これが私のフィドルでのやり方だからです。私はそのスタイルを実験していました。なぜなら、テーブル要素が相対的に配置されているときに、IEがスクロールするのが遅くなる傾向があることに気づいたからです。私の最終的な目標は、多数の行を持つスクロール可能な本体を持つ固定/固定ヘッダーを使用して大きなhtmlテーブルを作成することです。

出典

2017-07-17 Moaning Neighbors

は、クロム（64）と同じ問題を有します。しかし、あなたの例のように、外側のdivに「オーバーフロー：スクロール」を追加することで、この問題が解決されました。とにかく：あなたが探しているのかもしれない、スリックグリッドを見てみましょう。 –

transform: translate3d(0, 0, 0)をテーブルに追加してみてください。例を以下に示します。しかし、そのトリックは古くなってきています。それに関する投稿はすでに2012年に戻っています。たとえば、this postingを参照してください。

現在のところ、ブラウザはハードウェアアクセラレータで出荷されています。 DOM要素が恩恵を受けるという指示がある場合にのみ使用します。 CSSの場合、は、要素へのの3D変換が適用されていることを最も強く示しています。

私の会社では、ほぼすべての大きなリストに使用しています。ほとんど、それは正常に動作します。もう一つのソリューションは仮想化です。 FFとエッジに問題がないながら

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>

（又はfull snippet）

出典

2017-07-18 09:08:24 SVSchmidt

遅れて申し訳ありませんが、私は仮想化が何であるかについて読んでおり、正しく実装しようとしています。私の文書のパフォーマンスに大きな違いがあります。ここには[** WORKING DEMO **]（https://jsfiddle.net/ddqw6tg3/3/）があります。それにもかかわらず、私のスプレッドシート要素は、スクロールバーをドラッグした場合、または固定列（デモの最初の10個）をホバリングしながらマウスホイールを使用した場合にスムーズにスクロールします。しかし、この動作は私がテストした3つのブラウザで一貫していません。 Chromeのみがマウスホイールで円滑なスクロールを可能にします。 –

私は申し訳ありませんが、私は2つの理由でこれをdownvoteする必要があります：1）あなたの答えでは、 "transform：translate3d（0、0、0）をt a b l eに追加してみてください。しかし、おい、あなたはそれをテーブルの親divに追加しています！（どこかからコピーされていますか？）2）変換はトリックを行いません。オーバーフローはスクロールです（少なくともChrome 64の場合）。 –

Google Chromeの大きな（ish）htmlテーブルのスクロール動作

答えて

関連する問題