如何在滚动表内刷新网页时固定位置？答案

【问题标题】：How to fix position while refreshing the web page inside a scrolling table?如何在滚动表内刷新网页时固定位置？
【发布时间】：2021-11-30 22:13:51
【问题描述】：

我刚刚找到了这个教程：https://www.geeksforgeeks.org/how-to-create-a-table-with-fixed-header-and-scrollable-body/ 它对我来说非常有效，但我需要刷新网页并在表格中与以前在同一行中（例如一个有 10 000 行的表格，我需要在重新刷新网页后停留在第 600 行）。我只是添加：

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        var scrollpos = localStorage.getItem('scrollpos');
        if (scrollpos) window.scrollTo(0, scrollpos);
    });

    window.onbeforeunload = function(e) {
        localStorage.setItem('scrollpos', window.scrollY);
    };
</script>

但它不起作用，因为我停留在一个固定的网页上并且我在里面滚动。这是因为我的垂直滚动条包含在表格中，而不是在网页中。

如何重新加载网页以保持垂直滚动条的位置？

<!DOCTYPE html>

<html lang="en">

<head>
</head>

<body>
    
<!---Without refresh Dispositif-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

document.addEventListener("DOMContentLoaded", function(event) { 
    var scrollpos = localStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
    localStorage.setItem('scrollpos', window.scrollY);
};
    
</script>

<style>

.fixTableHead {
      overflow-y: auto;
      height: 600px;
    }
    .fixTableHead thead th {
      position: sticky;
      top: 0;
    }
    table {
      border-collapse: collapse;        
      width: 100%;
    }
    th,
    td {
      padding: 8px 15px;
      border: 2px solid #529432;
    }
    th {
      background: #ABDD93;
    }
    
</style>

 
<div class="fixTableHead">

    <table class="table table-striped header-fixed" id="tableau">

        <thead>
            <tr>

                <th>A</th>
                <th>B</th>
                <th>C</th>

            </tr> 
        </thead>


        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
        </tbody>

    </table>

</div>

</body>

</html>

谢谢

【问题讨论】：

标签： javascript php html css

【解决方案1】：

解决方案是将window.scrollY 替换为表格的scrollTop，并且，您应该在表格元素上设置scrollTop，而不是将window 滚动到滚动位置。

在您的标记中，滚动发生在 .fixTableHead 元素内，这是 <table> 的包装器。

因此，以下应该有效：

document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
    const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
        scroller.scrollTop = scrollpos;
    }
  }
});

window.onbeforeunload = function(e) {
  const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );
};

看到它在工作here。
向下滚动并再次按下 Run 按钮。您应该会看到应用在同一位置重新渲染。

注意：不幸的是，这不能在 SO sn-p 中进行演示，因为 SO 会阻止从其 sn-ps 访问 localStorage。

由于您似乎使用 jQuery，这里有一个相同脚本的 jQuery 版本：

(function($){
  const selector = '.fixTableHead';
  if ($(selector).length) {
    const el = $(selector).eq(0)[0];
    el.scrollTop = localStorage.getItem('scrollpos');
    window.onbeforeunload = () => {
      localStorage.setItem('scrollpos', el.scrollTop);
    }
  }
})(jQuery);

注意：您应该在将滚动元素添加到页面后运行脚本，否则它将无法运行。

【讨论】：

好的，我只是添加我的代码以便更具体。如何用我的表 offsetTop 替换 windows.scrollY ？使用表的 id ？
谢谢！ :) 现在可以完美运行了！
不客气，@Chev。我还写了它的 jQuery 版本，因为您似乎无论如何都加载了 jQuery。

【解决方案2】：

document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
    const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
        scroller.scrollTop = scrollpos;
    }
  }
});

window.onbeforeunload = function(e) {
  const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );
};

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
你为什么要从我的答案中复制代码并将其发布为你自己的？