关于css3:css修改浏览器滚动条样式

35次阅读

共计 804 个字符,预计需要花费 3 分钟才能阅读完成。

一、滚动条相干的属性

::-webkit-scrollbar                 滚动条整体局部,罕用属性:width,height,background,border;::-webkit-scrollbar-button          滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;::-webkit-scrollbar-track           整个滚动条去除两边按钮剩下的局部;::-webkit-scrollbar-track-piece     track 去掉拖拽剩下的局部;::-webkit-scrollbar-thumb           滚动条外面能够拖动的那局部;::-webkit-scrollbar-corner          边角;::-webkit-resizer                   定义右下角拖动块的款式 

二、根底改变,上例子

<div class="box">
  <div>1fnreknenverknrefnrenfengrnengej1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejkk</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>
.box {
  width: 300px;
  height: 100px;
  overflow: scroll;
}
div::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条的宽 */
  height: 8px; /* 横向滚动条的高 */
}
div::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #EBEBEB;
}

三、成果

注:只对 设置了高度和滚动成果的容器 失效

正文完
 0