overflow滚动条消失小技巧

最新推荐文章于 2024-06-05 09:46:36 发布

章鱼no丸子

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量2.6w

点赞数

分类专栏： HTML&CSS 文章标签： css overflow 滚动条

本文链接：https://blog.csdn.net/yuki_haha/article/details/72724283

版权

HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

模拟滚动条在工期紧张情况下，会比较烦心。但是又想要滚动效果，又不想看到滚动条怎么办呢？？

当然有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; // 滚动条拖动区域的外观颜色
}

章鱼no丸子

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
overflow滚动条消失小技巧

模拟滚动条在工期紧张情况下，会比较烦心。但是又想要滚动效果，又不想看到滚动条怎么办呢？？当然有scroolbar等一系列css属性可用。但是兼容性真不心水啊。为了尽快完成开发，什么剑走偏锋都要来一遍了。核心思想无非就是看不到滚动条，既然不能改变颜色不能让它透明，那我隐藏你呗。此处的隐藏不是display:none;啊。而是在有滚动条的元素外面再套一层壳子，然后通过控制宽度，加上overf
复制链接

扫一扫