All geek questions in one place

Javascript performance: fixed header and scroll column of table

I am trying to save a table header corrected using the Javascript event scrollto control the table header property top.

This method seems to be very different depending on the browser and screen resolution (my main visitors to the site are Retina MBP). Currently, he stutters badly. It may seem like it works fine in this Fiddle, but it will actually be slow and noisy on your desktop.

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

I need to scroll the page and stick to the table title bar when you scroll it.

          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);

Things I've already tried:

  • Usage requestAnimationFrame()- Currently Implemented
  • - .
  • - .
  • transform: translate() top -

, ,

  • position: fixed :
+4
2

: Javascript position: fixed . position: fixed, top left, .

0

?

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

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;
}
0

Source: https://habr.com/ru/post/1659003/

More articles:


All Articles