使用原生js和position: sticky固定表头和部分列

在看css文档的时候发现了position: sticky这个定位方法,正好项目上需要使用原生代码来实现固定表头和表列的功能,就琢磨使用sticky来实现。下面是一个简单的demo。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        #table-head {
            overflow: hidden scroll;
            background-color: #eee;
        }

        #table-body {
            overflow: auto scroll;
            max-height: 500px;
        }

        /* 使用position: sticky;将表格第一列固定 */
        table tr>td:first-child {
            position: sticky;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <div id="table-head">
            <table>
            </table>
        </div>
        <div id="table-body">
            <table>
            </table>
        </div>
    </div>
    <script>
        // 生成表格
        const thead = document.querySelector('#table-head>table')
        const tbody = document.querySelector('#table-body>table')
        const colNum = 40 // 列数
        const rowNum = 50 // 行数
        thead.width = colNum * 150 + 'px'
        tbody.width = colNum * 150 + 'px'
        let theadInnerHtml = ''
        let tbodyInnerHtml = ''
        for (let i = 0; i < colNum; i++) {
            theadInnerHtml += ''
            tbodyInnerHtml += ''
        }
        theadInnerHtml += ''
        tbodyInnerHtml += ''
        theadInnerHtml += ''
        for (let i = 0; i < colNum; i++) {
            theadInnerHtml += `第${i}列`
        }
        theadInnerHtml += ''
        thead.innerHTML = theadInnerHtml
        for (let i = 0; i < rowNum; i++) {
            tbodyInnerHtml += ''
            for (let j = 0; j < colNum; j++) {
                tbodyInnerHtml += `${i}`
            }
            tbodyInnerHtml += ''
        }
        tbody.innerHTML = tbodyInnerHtml

        // 表体滚动事件监听
        theadContainer = document.getElementById('table-head')
        tbodyContainer = document.getElementById('table-body')
        tbodyContainer.onscroll = function () {
        	// 拖动表体滚动条时将相应位置传给表头,实现同步滚动的效果
            theadContainer.scrollLeft = tbodyContainer.scrollLeft
        }
    </script>
</body>

</html>

思路:将表头和表体分开写,让表体上下滚动不影响表头;在表格左右滚动的时候触发position: sticky的特性实现固定列的效果,同时将表体的scrollLeft赋值给表头的scrollLeft,实现列对齐的效果。

注意事项

position: sticky兼容chrome56+,对ie兼容性不好,并且不脱离文档流,要谨慎使用。

你可能感兴趣的:(js)