0 
el.style.top = document.body.scrollTop + 'px';

我正在使用它来锁定某些 TH 元素的垂直滚动。这行代码似乎具有指数运行时复杂性。当我锁定 10 个元素时，它工作得很好。30个元素，它仍然响应但非常糟糕。60个元素，它变得没有反应。

如果你想知道。不，我没有重复调用它。每个卷轴准确地调用 3 次。

已解决：问题出在 document.body.scrollTop 中。尝试使用预先计算的值在页面上下滚动元素后，它很流畅，但是当将该虚拟调用添加到同一函数中时，它变得无响应。

4

2 回答 2

0

我会使用 CSS：

table {
  border-collapse: collapse;
}

th {
  position: sticky;
  top: 0;
  background-color: red;
  color: white;
  outline: solid 1px white;
  padding: 5px;
}

td {
  border: solid 1px black;
  text-align: center;
}
<table>
  <thead>
    <tr>
      <th>header column 1</th>
      <th>header column 2</th>
      <th>header column 3</th>
      <th>header column 4</th>
      <th>header column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
  </tbody>
</table>

于 2019-08-15T00:45:01.713 回答
0

根据您的style.top分配影响的内容以及浏览器渲染引擎的工作方式，每次访问都.scrollTop可能触发 reflow。因此，您应该在元素循环之前只访问它一次并将其存储在变量中：

const { scrollTop } = document.body;
for (const el of els) {
    el.style.top = scrollTop + 'px';
}
于 2019-08-15T17:26:46.377 回答