js通过transform实现固定（冻结）表格列-蒲公英云

js通过transform实现固定（冻结）表格列

<div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;">
    <table style="width:800px;">
        <thead>
            <tr style="background: #dcdcdc;">
                <th class="drag_user" style="background: #dcdcdc;">用户编号</th>
                <th>试用时间</th>
                <th>转正时间</th>
                <th>性别</th>
                <th>姓名拼音</th>
                <th>生日时间</th>
                <th>民族</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background: white;">
                <td class="drag_user" style="background: white;">2000001</td>
                <td>1997-3-13</td>
                <td>1997-3-13</td>
                <td>1</td>
                <td>WZJ</td>
                <td>1965-3-13</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000045</td>
                <td>2001-2-15</td>
                <td>2001-3-15</td>
                <td>0</td>
                <td>WY</td>
                <td>1978-8-5</td>
                <td>汉</td>
                <td>162</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td class="drag_user" style="background: white;">2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var tableCont = document.querySelector('#table-cont');
    function scrollHandle(event) {
        var scrollTop = event.target.scrollTop;
        var scrollLeft = event.target.scrollLeft;
        event.target.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        var dragUsers = event.target.querySelectorAll('.drag_user');
        for (i = 0; i < dragUsers.length; i++) {
            dragUsers[i].style.transform = 'translateX(' + scrollLeft + 'px)';
        }
    }
    tableCont.addEventListener('scroll', scrollHandle);
</script>