CSS滚动条

发布于 2016-03-04 13:54:51

滚动条又称进度条。Chrome浏览器使用伪元素来定位滚动条。

滚动条通常会出现在哪些地方

  • 浏览器边框，当页面内容超过浏览器视窗大小
  • textarea，内容过多时
  • iframe
  • div或任何block元素，当它们的被设定成overflow属性时
overflow: scroll; /* 让它显示滚动条 */

如何使用

Webkit浏览器专属的CSS属性需要使用-webkit-浏览器引擎前缀

::-webkit-scrollbar             滚动条全局。属性一般被其他元素属性覆盖。
::-webkit-scrollbar-button      上下的方向按键
::-webkit-scrollbar-track       滚动条下方的“空白”
::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
::-webkit-scrollbar-thumb       可拖动的滚动滑块
::-webkit-scrollbar-corner      可滚动网页元素下方的角，即纵横两个滚动条相交的地方
::-webkit-resizer               可滚动网页元素的供调节大小的控制块

::-webkit-scrollbar {
      width: 15px;
} /* 这是针对缺省样式 (必须的) */

本站例子

// 滚动条整体
::-webkit-scrollbar {
    width: 5px;
}

// 滚动条轨道
::-webkit-scrollbar-track {
  background-color: #001F27;
}

// 滚动条上下箭头按钮
::-webkit-scrollbar-button {
  display:  none;
}

// 滚动条滑块
::-webkit-scrollbar-thumb {
  background-color: #330066;
  border-radius: 3px;
}

为什么使用双冒号

早在CSS1里就已经有了伪元素的概念，但 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。

起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after 这个样子，用来跟“伪类(pseudo-classes)”区分开，(例如 :hover, :active, 等)。

参考链接

comments powered by Disqus