模拟滚动条在工期紧张情况下,会比较烦心。但是又想要滚动效果,又不想看到滚动条怎么办呢??
当然有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; // 滚动条拖动区域的外观颜色
}