[分享]css中 怎么把滚动条变短

在CSS中，我们可以通过修改滚动条的尺寸来让它更加适合我们的页面。下面我们就来看看怎么把滚动条变短。/修改垂直滚动条/ ::webkitscrollbar { 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，然后再设置样式即可。

通过以上代码，我们就可以轻松地让滚动条变短了。