我剛找到這個教程：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>
謝謝
uj5u.com熱心網友回復：
解決方案是window.scrollY用您的表格的scrollTop替換，并且window您應該scrollTop在表格元素上設定而不是滾動到滾動位置。
在您的標記中，滾動發生在.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 );
};
看到它在這里作業。
向下滾動并Run再次按下按鈕。您應該會看到應用程式在同一位置重新渲染。
注意：不幸的是，這不能在 SO 片段中進行演示，因為 SO 會阻止localStorage對其片段的訪問。
uj5u.com熱心網友回復：
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 );
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310034.html
標籤：javascript php html css
上一篇：如何從json陣列中獲取值