overflow滚动条消失小技巧

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yuki_haha/article/details/72724283
模拟滚动条在工期紧张情况下,会比较烦心。但是又想要滚动效果,又不想看到滚动条怎么办呢??
当然有scroolbar等一系列css属性可用。但是兼容性真不心水啊。为了尽快完成开发,什么剑走偏锋都要来一遍了。

核心思想无非就是看不到滚动条,既然不能改变颜色不能让它透明,那我隐藏你呗。

此处的隐藏不是display:none;啊。
而是在有滚动条的元素外面再套一层壳子,然后通过控制宽度,加上overflow:hidden;进行隐藏,是不是炒鸡简单快捷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 280px;
            height: 100px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .scroll-box {
            width: 300px;
            height: 100px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="scroll-box">
            <ul class="scroll">
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
                <li>章鱼不丸子</li>
            </ul>
        </div>
    </div>
</body>
</html>

第二种就是css自带功能:

*{
    scrollbar-3dlight-color:#fff; // 3d亮色阴影边框(threedlightshadow)的外观颜色
    scrollbar-highlight-color:#fff; // 滚动条3d高亮边框(threedhighlight)的外观颜色
    scrollbar-arrow-color:#fff; // 滚动条方向箭头的颜色
    scrollbar-shadow-color:#fff; // 滚动条方向箭头的颜色
    scrollbar-darkshadow-color:#fff; // 滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色
    scrollbar-base-color:#fff; // 滚动条基准颜色
    scrollbar-track-color:#fff; // 滚动条拖动区域的外观颜色
}
展开阅读全文

没有更多推荐了,返回首页