在CSS中,我们可以通过修改滚动条的尺寸来让它更加适合我们的页面。下面我们就来看看怎么把滚动条变短。/*修改垂直滚动条*/ ::-webkit-scrollbar { width: 10px; /*设
在CSS中,我们可以通过修改滚动条的尺寸来让它更加适合我们的页面。下面我们就来看看怎么把滚动条变短。
/*修改垂直滚动条*/
::-webkit-scrollbar {
width: 10px; /*设置滚动条的宽度*/
}
::-webkit-scrollbar-track {
background: #f1f1f1; /*设置滚动条的轨道颜色*/
}
::-webkit-scrollbar-thumb {
background: #888; /*设置滚动条的颜色*/
}
::-webkit-scrollbar-thumb:hover {
background: #555; /*设置滚动条鼠标经过时的颜色*/
}
/*修改水平滚动条*/
::-webkit-scrollbar-horizontal {
height: 10px; /*设置滚动条的高度*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #888; /*修改水平滚动条的颜色*/
}
以上代码中,我们先通过::-webkit-scrollbar
设置了整个滚动条的样式,包括宽度、轨道颜色等。而::-webkit-scrollbar-thumb
则用来设置滚动条的颜色和鼠标悬停时的颜色。
如果我们要修改水平滚动条的样式,只需要在::-webkit-scrollbar
后面加上-horizontal
,然后再设置样式即可。
通过以上代码,我们就可以轻松地让滚动条变短了。
粉丝
0
关注
0
收藏
0