使用 position: fixed固定 同时实现元素可以水平滚动

Daming 2018-08-21
0条评论 1,840 次浏览
Daming 2018-08-210条评论 1,840 次浏览

有个需求是 table 的thead 固定在表头,tbody可以滚动,由于tbody里边有些复杂,所以直接在tbody加滚动条不合适,我使用position: fixed固定住thead,但是遇到问题,由于table宽度是很宽的,水平移动滚动条时,页面动了但是使用 position: fixed固定住的thead不能跟随滚动,解决方案如下:

参考代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #fixed {
            position: fixed;
            left: 0px;
            top: 0px;
            border: solid 1px #000;
            width: 100%;
            background: #fff
        }
    </style>
</head>

<body>



    <div id="fixed">fixed定位容器</div>
    <div style="width:2000px;height:2000px">内容</div>
    <script>
        window.onscroll = function () {
            var sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
            document.getElementById('fixed').style.left = sl + 'px';
        }
    </script>


</body>

</html>

0

发表评论

电子邮件地址不会被公开。