Javascript 凍結(jié)列
類似 Excel 中的表格功能，很多 Web 應(yīng)用程序也需要橫向滾動(dòng)，同時(shí)保持一列或多列不動(dòng)，這時(shí)候 JavaScript 凍結(jié)列技術(shù)就能夠派上用場(chǎng)。
例如，一個(gè)需要右側(cè)滾動(dòng)的表格，我們希望左側(cè)一列（包括表頭）一直保持顯示，右側(cè)內(nèi)容可滾動(dòng)。
<!DOCTYPE html>
<html>
<head>
<title>Javascript 凍結(jié)列</title>
<style>
.container {
width: 500px;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
}
.floating-column {
position: absolute;
left: 0;
top: 0;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Occupation</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="floating-column">Tom</td>
<td>25</td>
<td>New York</td>
<td>Engineer</td>
<td>$50,000</td>
</tr>
<tr>
<td class="floating-column">Mary</td>
<td>30</td>
<td>London</td>
<td>Doctor</td>
<td>$100,000</td>
</tr>
...
<tr>
<td class="floating-column">John</td>
<td>40</td>
<td>Sydney</td>
<td>Teacher</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
</div>
<script>
const container = document.querySelector('.container');
const columns = document.querySelectorAll('.floating-column');
container.addEventListener('scroll', () => {
columns.forEach(column => {
column.style.transform = 'translateY(' + container.scrollTop + 'px)';
});
});
</script>
</body>
</html>在上面的代碼中，我們使用了 CSS 的 position: absolute 和 JavaScript 的 transform 屬性來(lái)實(shí)現(xiàn)凍結(jié)列。具體來(lái)說(shuō)，左邊一列使用了 class="floating-column"，通過(guò) position: absolute 固定位置，同時(shí)對(duì)其它列應(yīng)用 transform: translateY 同步滾動(dòng)。
我們?yōu)闉g覽器窗口創(chuàng)建了具有水平滾動(dòng)條的 div 容器，并在其中放置了一個(gè)帶有 thead 和 tbody 的表。固定的列標(biāo)識(shí)為 class，而 JavaScript 將其與 table 的剩余部分分離開(kāi)來(lái)。
當(dāng)用戶滾動(dòng)容器時(shí)，JavaScript 將相對(duì)滾動(dòng)位置轉(zhuǎn)換為一個(gè) CSS 樣式來(lái)更新固定列的位置。
此外，您還可以使用封裝好的 JavaScript 庫(kù)來(lái)實(shí)現(xiàn)凍結(jié)列，比如 TableHeadFixer.js，其代碼簡(jiǎn)潔且易于使用：
<!DOCTYPE html>
<html>
<head>
<title>Javascript 凍結(jié)列</title>
</head>
<body>
<table id="fix" border="1">
<thead><tr align="center">
<th>Header 1</th>
<th>Header 2</th></tr></thead>
<tbody>
<tr><td align="center">1</td>
<td>Test</td></tr>
<tr><td align="center">2</td>
<td>Test a</td></tr>
...
</tbody>
</table>
<script type="text/javascript" src="TableHeadFixer.js"></script>
<script>
var fixmeTop = $('#fix').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll > fixmeTop) {
$('#fix').css({
position: 'fixed',
top: '0',
left: '50%',
transform: 'translateX(-50%)'
});
} else {
$('#fix').css({
position: 'static'
});
}
});
var fixer = new TableHeadFixer('fix');
fixer.init();
</script>
</body>
</html>在上面的代碼中，我們使用了 TableHeadFixer.js 腳本將表頭固定。js 文件使用原生 JavaScript 編寫，其中有豐富的文檔和選項(xiàng)來(lái)使其適應(yīng)您的表格。
總之，JavaScript 凍結(jié)列技術(shù)是一項(xiàng)重要的 Web 開(kāi)發(fā)功能，能夠提高表格的可讀性和易用性。采用正確的方法和工具，您可以輕松地實(shí)現(xiàn)表格凍結(jié)列的效果，使用戶體驗(yàn)更加優(yōu)秀。