咨询一下滚动的css样式设置
来源：5-12 项目作业
键盘f11
2020-08-13 01:02:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改滚动条颜色</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #F3F3F3;
font-size: 14px;
font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
letter-spacing: 0;
color: #333333;
}
div{
width: 200px;
height: 200px;
padding: 20px;
overflow: auto;
margin: 50px auto;
}
/* IE 浏览器 */
.scrollbar{
/*三角箭头的颜色*/
scrollbar-arrow-color: green;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:#0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
/* chrome & safari 浏览器 */
/*滚动条整体部分,必须要设置*/
.scrollbar::-webkit-scrollbar{
width: 10px;
height: 10px;
background-color: #0099ff;
}
/*滚动条的轨道*/
.scrollbar::-webkit-scrollbar-track{
background-color: #0099ff;
}
/*滚动条的滑块按钮*/
.scrollbar::-webkit-scrollbar-thumb{
border-radius: 0;
background-color: #f00;
box-shadow: inset 0 0 5px #f00;
}
/*滚动条的上下两端的按钮*/
.scrollbar::-webkit-scrollbar-button{
height: 5;
background-color: pink;
}
</style>
</head>
<body>
<div class="scrollbar">
<h3>1846492969</h3>
<h3>helang.love@qq.com</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
<h3>1846492969</h3>
<h3>helang.love@qq.com</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
<h3>1846492969</h3>
<h3>helang.love@qq.com</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
<h3>1846492969</h3>
<h3>helang.love@qq.com</h3>
<h3>web-7258</h3>
<h3>WEB前端梦之蓝</h3>
</div>
</body>
</html>
老师，您好，我想咨询一下关于项目当中的滚动条的写法，主要是滚动条上面的三角为什么我更改了颜色以后显示不出来呢？scrollbar-arrow-color: #fff;这个样式是用来控制三角的显示颜色的，为什么更改了颜色之后好像是没有变化，老师如何去修改呢？
1回答
-
好帮手慕慕子
2020-08-13
同学你好， 因为scrollbar-arrow-color属性是针对IE浏览器有效的，ie中测试可以将三角形改成白色，如下：
如果是在chrome浏览器上自定义滚动条样式，默认不再有箭头样式，所以实现效果的效果如下所示
同学不用纠结这个，作业要求使用默认的滚动条样式就可以了，而且实际开发中，几乎不会有使用到修改默认滚动条样式的场景，所以同学了解下就可以了。
祝学习愉快~
0
相似问题