css滚动条实现步骤及美化小技巧滚动条css设置( 二 ) _css滚动条

下面是我们根据上面的模拟图来定制滚动条。
.::-- {
width: 16px;
}
.::---track {
-color: #;
-: 100px;
}
.::---thumb {
-color: #;
-: 100px;
}
为 track 和thumb添加-是必要的，因为它在::-上不起作用。
在新的语法中，我们不能调整滚动条的宽度，唯一能做的的是改变 track 和thumb的背景颜色。
. {
-color: # #;
}
例2
对于这个例子，设计有点重，因为它包含渐变和阴影。我们可以应用内部阴影和渐变来模仿这种效果。来看看怎么做!
.::---thumb {
-image: -(, # 0%, # 99%);
box-: inset 2px 2px 5px 0 rgba(#fff, 0.5);
-: 100px;
}
示例地址：
例3
我们还可以为 thumb 和track添加边框，这可以帮助我们处理一些棘手的设计。
.::---thumb {
-: 100px;
: #;
: 6px solid rgba(0,0,0,0.2);
}
基于同样的例子，我们可以重置顶部和底部边界为零，这样thumb获得一个有趣的效果。注意thumb顶部和底部的那些小元素。
示例地址：
我们可以为新旧语法的滚动条thumb添加悬停效果。
/* 旧语法 */
.::---thumb:hover {
-color: #;
}
/* 新语法 */
. {
-color: # #;
: -color 0.3s ease-out;
}
.:hover {
-color: #;
}
创建一个可滚动的元素是可以通过给属性添加一个除以外的值。建议使用auto关键字，因为它只在内容超过其容器时才会显示滚动条。
. {
-y: auto;
}
在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的对比，这样它就容易被用户注意。
考虑一下下面这个自定义滚动条的 "坏 "例子。
thumb 的颜色几乎看不出来。这对用户来说不是好事，因为如果他们习惯于通过thumb 滚动，这将增加他们的难度。

css滚动条实现步骤及美化小技巧 滚动条css设置( 二 )

css滚动条实现步骤及美化小技巧滚动条css设置( 二 )