javascript - HTML 表格中的静态行

Question

我正在尝试创建一个文件，列出 HTML/Javascript 中的 la Windows 资源管理器。因此，我希望表格的第一行(包含所有列的标题)即使在滚动列时也能看到。

我尝试了一些将标题放在单独的表格中的选项，但都失败了，主要是因为一个原因——当文件列表水平滚动时，标题表格不会随之滚动。

因此，我本质上是在寻找一个元素，该元素以水平而非垂直滚动的方式链接到另一个元素。

我意识到很多人会认为我应该使用 css 而不是表格，但这没有实际意义，因为即使使用 css 我也无法解决希望标题栏随文件水平而非垂直滚动的问题。

如果您能提供任何帮助，我们将不胜感激。

Answer 1

我的建议是使用 Javascript。 Hook 到两个可滚动元素的 onScroll 事件，并在该事件上更新两个元素的 scrollLeft 属性。

    var tableHeader = document.getElementById('tableHeader');
    var tableBody = document.getElementById('tableBody');

    function updateTableBody(e){
        tableBody = tableHeader.scrollLeft;
    }

    function updateTableHeader(e){
        tableHeader = tableBody.scrollLeft;
    }    

    tableHeader.addEventListener('scroll', updateTableBody, false);
    tableBody.addEventListener('scroll', updateTableHeader, false);

当然，这不是万无一失的，可以优化，但它会给你和想法，希望是一个好的开始。

注意:确保两个元素具有相同的尺寸，否则滚动会有奇怪的偏移。