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

东明兄 • 2018-08-21 • 开发笔记 • 4752 阅读
chat

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

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/551/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
使用 position: fixed固定 同时实现元素可以水平滚动
有个需求是 table 的thead 固定在表头，tbody可以滚动，由于tbody里边有些复杂，所以直接在tbody加滚动条不合适，我使用position: fixed固定住thead，但是遇到问题，由于table宽度是很宽的，水平移动滚动条时，页面动了但是使用 position: fixed固定住的thead不能跟随滚动
<<上一篇
下一篇>>
chat