水平横向溢出滚动

直接看效果:

a1.png

<!DOCTYPE html>
<html>
<head>
    <title>sdf</title>
    <style>
        /* hide scrollbar */
        ::-webkit-scrollbar {
            width: 1px;
            height: 1px;
        }
        ::-webkit-scrollbar-button {
            width: 1px;
            height: 1px;
        }
        .g-scroll {
            position: relative;
            width: 200px;
            height: 200px;
            transform-origin: 100% 0;
            transform: rotate(-90deg);
            overflow: scroll;
        }
        .g-pesudo {
            width: 200px;
            height: 400px;
            background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3));
        }
        .g-content {
            position: absolute;
            top: 0;
            left: 200px;
            width: 400px;
            height: 200px;
            transform-origin: 0 0;
            border: 1px solid #000;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>

<div class="g-scroll">
    <div class="g-pesudo"></div>
    <div class="g-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quis ipsum officiis placeat ipsa sit ad incidunt similique, consequuntur earum architecto recusandae veritatis et illo, illum quae nulla minus rerum?
    </div>
</div>

</body>

文章链接:https://segmentfault.com/a/1190000042443056

复制内容


评论


乖,登录后才可以留言! 登录

Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计
0.216361s