瀏覽器滑動條設置

CSS瀏覽器滾動條設置

CSS滾動條選擇器

可以使用以下僞元素選擇器修改webkit瀏覽器的滾動條樣式:

• ::-webkit-scrollbar — 整個滾動條.
• ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
• ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
• ::-webkit-scrollbar-track — 滾動條軌道.
• ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
• ::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

案例

<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}

參考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

:horizontal— horizontal僞類適用於任何水平方向上的滾動條

:vertical— vertical僞類適用於任何垂直方向的滾動條

:decrement — decrement僞類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕

:increment — increment僞類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕

:start — start僞類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的前面

:end— end僞類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的後面

:double-button — double-button僞類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。

:single-button — single-button僞類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。

:no-button — no-button僞類表示軌道結束的位置沒有按鈕。

:corner-present
//corner-present僞類表示滾動條的角落是否存在。

:window-inactive
//適用於所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。

::-webkit-scrollbar-track-piece:start { /*滾動條上半邊或左半邊*/ }

::-webkit-scrollbar-thumb:window-inactive { /*當焦點不在當前區域滑塊的狀態*/ }

::-webkit-scrollbar-button:horizontal:decrement:hover { /*當鼠標在水平滾動條下面的按鈕上的狀態*/ }

參考：https://blog.csdn.net/byc233518/article/details/78469547