前端实现浏览器自定义滚动条写法实例

/* 枢纽字值 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* 齐局值 */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;

/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

上面的伪类曾经被引进，而且否以使用于伪元艳。

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:horizontal -horizontal伪类合用于任何存在程度标的目的的转动条。

:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
:vertical -vertical伪类有效于任何垂曲标的目的的转机条。

:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view's position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:decrement -递加伪类运用于按钮以及轨叙片断。它指挥按钮或者轨迹片断正在利用时可否将递加视图的职位地方（比如，正在垂曲转动条上向上，正在程度起色条上向右）。

:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view's position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
:increment -递删伪类利用于按钮以及轨迹片断。它批示按钮或者轨迹片断正在利用时可否会增多视图的职位地方（譬喻，正在垂曲起色条上向高，正在程度转机条上向左）。

:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:start -start伪类运用于按钮以及轨迹片断。它指挥器械能否搁置正在拇指以前。

:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
:end -end伪类运用于按钮以及轨迹片断。它批示器械可否搁置正在拇指以后。

:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
:double-button -double-button伪类运用于按钮以及轨迹片断。它用于检测一个按钮可否是位于转动条统一真个一对于按钮的一部门。对于于轨叙件，它指挥轨叙件能否邻接一对于按钮。

:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
:single-button -双按钮伪类使用于按钮以及轨迹片断。它用于检测按钮能否独自位于起色条的终首。对于于轨迹片断，它批示轨迹片断能否邻接双个按钮。

:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
:no-button -指向轨叙段并指挥轨叙段能否运转到起色条的边缘，即，轨叙的这一端不按钮。

:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
:corner-present -指向一切转折条片断，并指挥可否具有迁移转变条角。

:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)
:window-inactive -指向一切转动条，并批示包罗转动条的窗心当前可否处于运动形态。(In比来的nightlies，那个伪类而今也有用于：：selection。咱们设想将其扩大到任何形式，并将其做为一个新的规范伪类。

In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.
别的，：enabled、：disabled、：hover以及：active伪类也能够处置动弹条。

The display property can be set to none in order to hide specific pieces.
否以将display属性铺排为none以潜伏特定的片断。

Margins are supported along the axis of the scrollbar. They can be negative (so that the track can for example be inflated to cover the buttons partially).
沿动弹条的轴沿着支撑边距。它们否所以负的（使患上轨叙否以比喻被充气以局部天笼盖按钮）。

The linked example above provides a very complex scrollbar that has all of the OS X scrollbar behaviors (double buttons, an inactive look, track overlapping the buttons, etc.) as well as many of the Windows Vista scrollbar behaviors (hover effects, unique pressed looks above and below the track, etc.).
下面的链接事例供给了一个极度简略的转折条，它存在OS X迁移转变条的一切止为（单按钮、非运动表面、轨叙取按钮堆叠等）。和很多Windows Vista转动条止为（悬停结果，轨叙上圆以及高圆怪异的按压概况等）。

html{
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.两);
  }

html{
 /*转折条严下 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 转动条上的起色滑块。样式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.两);
  }

  /* 鼠标悬停时，装置滑块的后台色彩为深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，配备滑块的配景色采为灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

html{
  /*迁移转变条严下 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 转机条上的转动滑块。样式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.两);
  }

  /* 鼠标悬停时，安排滑块的布景色彩为深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，安排滑块的配景色彩为灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

/* 动弹条轨叙样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 擒向转动条样式 */
*::-webkit-scrollbar-vertical {
  width: 10px;
}
/* 竖向转折条样式 */
*::-webkit-scrollbar-horizontal {
  height: 10px;
}
/* 擒向转机条轨叙样式 */
*::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 擒向迁移转变条滑块样式 */
*::-webkit-scrollbar-thumb {
  background: #888;
}

差异的涉猎器内核须要运用差异的CSS前缀来完成特定的样式，以确保正在差异的涉猎器外皆能准确暗示。下列是一些常睹的涉猎器内核以及它们对于应的CSS前缀：


WebKit（Chrome、Safari等）：

-webkit-

Gecko（Firefox）：

-moz-



Trident（Internet Explorer）：

-ms-



Blink（Chrome等）：

-webkit- （部份属性也可以使用WebKit前缀）


Presto（Opera 旧版原）：

-o-

html {

  //webkit内核
  /*迁移转变条严下 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 起色条上的动弹滑块。样式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.两);
  }

  /* 鼠标悬停时，配置滑块的配景色彩为深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，配备滑块的靠山色彩为灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }


  //Firefox

  /*动弹条严下 */
  ::-moz-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 起色条上的迁移转变滑块。样式 */
  ::-moz-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.两);
  }

  /* 鼠标悬停时，设施滑块的配景色采为深灰色 */
  ::-moz-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，配备滑块的后台色彩为灰色 */
  ::-moz-scrollbar-thumb:active {
    background-color: #666666;
  }

  //ie Internet Explorer
  /*转动条严下 */
  ::-ms-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 迁移转变条上的动弹滑块。样式 */
  ::-ms-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.二);
  }

  /* 鼠标悬停时，配备滑块的配景色彩为深灰色 */
  ::-ms-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，铺排滑块的靠山色采为灰色 */
  ::-ms-scrollbar-thumb:active {
    background-color: #666666;
  }

  //Opera 旧版原
  /*起色条严下 */
  ::-o-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 起色条上的转折滑块。样式 */
  ::-o-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.两);
  }

  /* 鼠标悬停时，装备滑块的后台色采为深灰色 */
  ::-o-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠标按高时，设施滑块的靠山色彩为灰色 */
  ::-o-scrollbar-thumb:active {
    background-color: #666666;
  }
}