overflow滚动条消失小技巧

来源：互联网发布：稳定性最好的单片机编辑：程序博客网时间：2024/06/05 07:06

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

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

阅读全文

0 0