layui纯css表格顶部显示控制滚动条

2021-09-27

web前端

因表格字段过多，每次浏览需要滑到底部才能滚动查看其他字段，所以要求将滚动条置顶显示

思路

更换更大的屏幕（不是
隐藏底部滚动条，顶部自定义滚动条，增加滚动事件
翻转画布

后面选择了第三种方式，

原理

将画面翻转，内容再按原角度翻转回去，就达到这种效果了

<html lang="en">
<head>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: 15px;
        }
        
        #vertical {
            direction: rtl;
            overflow-y: scroll;
            overflow-x: hidden;
            background: gold;
        }
        
        #vertical p {
            direction: ltr;
            margin-bottom: 0;
        }
        
        #horizontal {
            direction: rtl;
            transform: rotate(180deg);
            overflow-y: hidden;
            overflow-x: scroll;
            background: tomato;
            padding-top: 30px;
        }
        
        #horizontal span {
            direction: ltr;
            display: inline-block;
            transform: rotate(-180deg);
        }
    </style>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="vertical">
        <p>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content</p>
    </div>
    <div id="horizontal"><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
    </div>
</body>

</html>

还可以设置翻转到左边

layui添加样式

 .layui-card-body{
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
}
.layui-table-view{
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

参考资料

how-to-change-scroll-bar-position-with-css

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。