Javascriptのパフォーマンス：スクロール時の固定テーブルヘッダーと列

Javascript scrollイベントを使用してテーブルヘッダーを固定して、テーブルヘッダーのtopプロパティを操作しようとしています。Javascriptのパフォーマンス：スクロール時の固定テーブルヘッダーと列

このテクニックは、ブラウザと画面の解像度によって大きく異なるようです（私の主要サイト訪問者はRetina MBPです）。現在、それはひどく骨が折れる。このフィドルでうまくいくように見えるかもしれませんが、あなたのデスクトップ上では実際にはゆっくりとジャンクになります。

https://jsfiddle.net/taylorpalmer/exp057a5/

私は、ページをスクロールして、あなたがそれを過ぎてスクロールするように、テーブルヘッダースティックを持ってできるようにする必要があります。

  var allTh = document.querySelectorAll("th"); 
      var leftCells = document.querySelectorAll(".fixed-col"); 
      var latestKnownScrollX = 0; 
      var latestKnownScrollY = 0; 
      var ticking = false; 


      var onScroll = function() { 
      latestKnownScrollX = document.body.scrollLeft; 
      latestKnownScrollY = document.body.scrollTop; 
      requestTick(); 
      } 

      function requestTick() { 
      if (!ticking) { 
       requestAnimationFrame(update); 
      } 
      ticking = true; 
      } 

      var immediate = true; 

      var update = function() { 
      console.log('scrolling'); 
      ticking = false; 
      var currentScrollY = latestKnownScrollY; 
      var currentScrollX = latestKnownScrollX; 

      var translateHead = (currentScrollY) +"px"; 

      for(var i=0; i < allTh.length; i++) { 
       allTh[i].style.top = translateHead; 
      } 

      var translateCell = currentScrollX + "px"; 

      for(var i=0; i < leftCells.length; i++) { 
       leftCells[i].style.left = translateCell; 
      } 

      }; 

     window.addEventListener("scroll", onScroll);

物事が私はすでに試してみました：

がrequestAnimationFrame()を使用して - 現在
デバウンススクロールを実装しています - パフォーマンスを向上させなかった
スロットルスクロール - パフォーマンスを改善しなかった
topの代わりにtransform: translate()を使用すると、違い

物事私がについて考えてきましたが、position: fixedまたは類似を使用して

を動作しません：ヘッダーセルが彼らのダイナミックな幅を失い、価値のないテーブルになるだろう

出典

2016-10-26 taylorpalmer

私は 'position：fixed'を使ってより良いスクロールパフォーマンスを作り、' scroll'イベントで反対の軸を操作しましたが、それは2倍の作業です。通常のスクロールの監視を改善するためのアイデアですか？ – taylorpalmer

最終的な解決策：JavaScriptのスクロールはパフォーマンスのためにposition: fixedと競合できません。私はposition: fixedを使用して終了し、topとleftプロパティを必要に応じて操作してテーブルを完成させました。

出典

2016-10-28 13:58:47 taylorpalmer

このようにするのはいかがですか？

https://jsfiddle.net/keikei/g3mt0rq6/

それはthis answer of the question

JSに触発されています：

var tableOffset = $("#table-1").offset().top; 
var $header = $("#table-1 > thead").clone(); 
var $row = $("#table-1 > tbody > tr").first().clone(); 
var $fixedHeader = $("#header-fixed") 
    .append($header) 
    .append($("<tbody>").append($row)); 

$(window).bind("scroll", function() { 
    var offset = $(this).scrollTop(); 

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) { 
    $fixedHeader.show(); 
    } else if (offset < tableOffset) { 
    $fixedHeader.hide(); 
    } 
});

HTML：

<body> 
    <div id="wrap"> 
    <table id="header-fixed"></table> 
    <table id="table-1"> 
     <thead> 
     <tr> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
      <th>Test</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="fixed-col">Test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test<span style="position: relative">Relative</span></td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
      <td>test</td> 
     </tr> 
     <!-- and so on... ---> 
     </tbody> 
    </table> 
    </div> 
</body> 
<script> 


</script>

はCSS：

#header-fixed { 
    position: fixed; 
    top: 0px; 
    display: none; 
    z-index: 20; 
} 

#header-fixed > tbody { 
    visibility: hidden; 
} 

#header-fixed > tbody > tr > td { 
    height: 0; 
    font-size: 0; 
    border: none; 
} 

th { 
    height: 100px; 
    background: #999; 
    color: white; 
    position: relative; 
    z-index: 10; 
} 

td { 
    background-color: white; 
    min-width: 100px; 
    height: 100px; 
    text-align: center; 
    position: relative; 
    z-index: 1; 
} 

.fixed-col { 
    z-index: 5; 
} 

body, 
html { 
    margin: 0; 
} 

thead { 
    position: relative; 
    z-index: 6; 
}

出典

2016-10-27 03:26:01 Kei

ありがとう！私は以前このアプローチを見てきましたが、あなたの実装にはいくつかの問題があります。1.ヘッダーは、テーブルと2で右から左にスクロールしません。2.最初の列は固定されていません。 – taylorpalmer

Javascriptのパフォーマンス：スクロール時の固定テーブルヘッダーと列

答えて

関連する問題