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

东明兄 • 2018-08-21

0条评论 • 2,684 次浏览

东明兄 • 2018-08-21 • 0条评论 • 2,684 次浏览

有个需求是 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>

1.如需转载本站原创文章，请务必注明文章出处并附上链接，非常感谢。

2.本站用于记录个人工作、学习、生活，非商业网站，更多信息请点击这里

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

相关推荐:

发表评论 取消回复

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

发表评论取消回复