css scrollbar樣式設置

張春雷發布于2019-08-29 14:13 / 2891人閱讀

摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。

一前言

在CSS 中，如果我們在塊級容器上設置了屬性:

overflow:scroll /* x y 方向都會*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

當塊級內容區域超出塊級元素范圍的時候，就會以滾動條的形式展示，你可以滾動里面的內容，里面的內容不會超出塊級區域范圍。
有時候我們需要自定義滾動條的樣式，比如一開始就它顯示，比如想改變滾動條的顏色，設置軌道的樣式等，那么這篇文章就是為你準備的。

二正文

1.認識滾動條

設置scrollbar的為CSS偽元素，對應上圖的數字：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

屬性介紹：

::-webkit-scrollbar    //滾動條整體部分
::-webkit-scrollbar-button   //滾動條兩端的按鈕
::-webkit-scrollbar-track   // 外層軌道
::-webkit-scrollbar-track-piece    //內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-thumb //滾動條里面可以拖動的那個
::-webkit-scrollbar-corner   //邊角
::-webkit-resizer   ///定義右下角拖動塊的樣式

2.設置樣式

demo
進入頁面，打開控制臺工具，選中其中一個樣式，就能看到該樣式的CSS源碼。

/*定義滾動條高寬及背景
 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定義滾動條軌道
 內陰影+圓角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定義滑塊
 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

任何對象都可以設置：邊框、陰影、背景圖片等等，創建的滾動條任然會按照操作系統本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中。

:horizontal//適用于任何水平方向上的滾動條
:vertical//適用于任何垂直方向的滾動條
:decrement//適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕
:increment//適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕
:start//適用于按鈕和軌道碎片。表示對象（按鈕軌道碎片）是否放在滑塊的前面
:end //適用于按鈕和軌道碎片。表示對象（按鈕軌道碎片）是否放在滑塊的后面
:double-button//適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。
:single-button//適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨著一個多帶帶的按鈕。
:no-button//表示軌道結束的位置沒有按鈕。
:corner-present//表示滾動條的角落是否存在。
:window-inactive//適用于所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。

用法舉例：

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn"t in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it"s being hovered by the mouse */
}

3.IE瀏覽器
兼容IE的參考鏈接：https://www.cnblogs.com/koley...

三后記

Chrome能很好的支持自定義滾動條，其它的瀏覽器在不同程度上支持自定義滾動條樣式。
參考文章：http://blog.csdn.net/cysear/a...

云服務器 GPU云服務器 js設置css樣式 css樣式頁面css樣式 css的樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113000.html

css scrollbar樣式設置

摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。一前言在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...

104828720 2019-08-01 18:23 評論0 收藏0
CSS進階篇--設置滾動條樣式

摘要：用于所有滾動條軌道，指示滾動條圓角是否顯示。用于所有的滾動條軌道，指示應用滾動條的某個頁面容器元素是否當前被激活。因為在現在的大部分項目中很多都用到了滾動條，有時候用到模擬的滾動條，現在說下滾動條的CSS也能解決。比如網易郵箱的滾動條樣子很好看，就是利用的CSS來設置的，而且是webkit瀏覽器的。如圖所示： showImg(https://segmentfault.com/img...

elva 2019-08-28 18:15 評論0 收藏0
瀏覽器滾動條 --- 自定義“衣裳”

摘要：由于種種原因，瀏覽器的默認滾動條衣裳實在是，為了美，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。標識對象是否放到滑塊的后面。該偽類可以用于按鈕和內層軌道。用于所有滾動條軌道，指示滾動條圓角是否顯示。由于種種原因，瀏覽器的默認滾動條衣裳實在是 (ˉ▽￣～)~~，為了美，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。若有錯誤，請在評論里給出，我會及時更改。我在電腦上打開了...

mtunique 2019-04-23 13:44 評論0 收藏0
如何自定義CSS滾動條的樣式？

摘要：需求有的時候我們不想使用瀏覽器默認的滾動條樣式，因為不夠定制化和美觀。可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和I...

linkFly 2019-08-02 12:07 評論0 收藏0
如何自定義CSS滾動條的樣式？

摘要：可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。 0.需求...

kviccn 2019-04-23 13:09 評論0 收藏0