CSS教程

css3滚动条样式,代码奉上

本文主要是介绍css3滚动条样式,代码奉上,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    今天给大家说一说关于css3滚动条样式,话不多说直接上代码:

::-webkit-scrollbar — 整个滚动条.

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

::-webkit-scrollbar-track — 滚动条轨道.

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

把以下样式放入项目的全局样式中


/*整个滚动条*/ 

::-webkit-scrollbar {

 

  width: 5px;

 

  height: 8px;

 

  background-color: #fff;

 

}

 

/*定义滚动条轨道*/

 

::-webkit-scrollbar-track {

 

  background-color: #fff;

 

}

 

/*定义滑块*/

 

::-webkit-scrollbar-thumb {

 

  background-color: #ACB1BF;

 

  border-radius: 4px;

 

}

    以上便是关于css3滚动条样式的全部内容,更多内容可关注慕课网其他文章~

这篇关于css3滚动条样式,代码奉上的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!