使用CSS美化Chrome下的滾動條樣式

阿新 • • 發佈：2019-01-28

瀏覽器原生的滾動條有時過多會影響介面美觀，IE下的滾動條更是如此，有時我們需要美化一下滾動條，可以使用瀏覽器原生的樣式，或者使用JS外掛，這裡介紹如何修改Chrome下的滾動條樣式。

主要藉助偽元素實現：

//index.html
<body>
    <div class="container">
        <p>Pellentesque habitant morbi tristique senectus...(很多文字)</p>
    </div>
</body>

//style.css
.container {
    width 
: 300px;
    height: 100px;
    overflow: auto;
}
p {
    width: 500px;
    height: 200px;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /*background-color: #ddd;*/
}


/*滑塊*/
::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #777 
;
}


/*滑道*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #333;
    border-radius: 10px;
}

執行效果：
這裡寫圖片描述

瀏覽器預設情況下上下左右各有一個按鈕用來滾動，我們也可以自定義圖片來代替它：

//style.css
//上述程式碼
...
/*上下左右按鈕*/
::-webkit-scrollbar-button {
    /*縱方向按鈕的高度，寬度由scrollbar定義*/
    height: 20px;
    /*橫方向按鈕的高度，高度由scrollbar定義*/
    width: 20px; 

}

::-webkit-scrollbar-button:vertical:start {
    background-image: url("up.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);
    background-repeat: no-repeat;
    background-position: bottom left, 0 0;
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("down.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);
    background-repeat: no-repeat;
    background-position: bottom left, 0 0;
}

::-webkit-scrollbar-button:horizontal:start {
    background-image: url("left.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);
    background-repeat: no-repeat;
    background-position: bottom left, 0 0;
}

::-webkit-scrollbar-button:horizontal:end {
    background-image: url("right.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);
    background-repeat: no-repeat;
    background-position: bottom left, 0 0;
}

執行效果：
這裡寫圖片描述

使用JS外掛的話可以上gayhub查詢相關專案，在此列舉2個：

使用CSS美化Chrome下的滾動條樣式

瀏覽器原生的滾動條有時過多會影響介面美觀，IE下的滾動條更是如此，有時我們需要美化一下滾動條，可以使用瀏覽器原生的樣式，或者使用JS外掛，這裡介紹如何修改Chrome下的滾動條樣式。主要藉助偽元素實現： //index.html <body>

css實現修改預設滾動條樣式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>scroll </title> <style>

用CSS美化你的滾動條

<div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non sempe

CSS 之自定義滾動條樣式

col http lba dede back 分享技術 sha spa ::-webkit-scrollbar {/*滾動條整體樣式*/ width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 1px; } ::-

chrome與ie瀏覽器滾動條樣式修改（firefox不支援css修改滾動條樣式）

1.chrome滾動條樣式修改 #userNavId::-webkit-scrollbar { width:10px; height:10px; } #userNavId::-webkit-scrollbar-button

[分享] 通過修改CSS自定義chrome滾動條樣式

首先得說一句我不懂CSS的寫法之類的這段CSS也是在網上找的所以有更先進的需求的話我肯定不能滿足你們了不好意思效果圖在10樓有人上了我這邊不管怎麼弄上傳圖片都卡在96% 而且不翻wall不能回帖翻wall的情況下上論壇這個慢啊所以大家去看這個圖吧htt

css修改瀏覽器默認的滾動條樣式

box idt ica inset wid log class 滑動 llb //滾動條樣式 ::-webkit-scrollbar { width: 10px; } /* 垂直滾動條的滑動塊 */ ::-webkit-scrollbar-thumb:vertical

css修改滾動條樣式

track 滾動 absolute pos erb body auto back trac <div class="inner"> <div class="innerbox"> <p style="height:20

css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

sed 分享 play gpo radi https cal hid 右移 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）

css 改變滾動條樣式

HA style box title strong 允許通過 width web 1.滾動條組成　 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決

css實現修改默認滾動條樣式

dtd pointer inter rgb back rbo trac 整體 rgba <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>

css設定滾動條樣式，解決ios修改滾動條樣式無效問題

css部分 /* 橫向滾動容器 */ .scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex;

個人筆記003--css改變滾動條樣式

下午有時間就整理一下以前寫過的一些東西，覺得這個css改變滾動條樣式比較常用就順手記錄了下來 <style type="text/css"> ::-webkit-scrollbar {/*滾動條整體樣式*/ width: 14px; height:

CSS設定瀏覽器滾動條樣式

/*定義滾動條高寬及背景高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5F5F5; } /*定義滾動條軌道內陰影+圓角*/

css如何修改滾動條樣式

預設滾動條樣式如下：那如何修改呢？如下程式碼： <div class="inner"> <div class="innerbox"> <p style="height:200px;">這是內容111

一份簡單的chrome滾動條樣式

之前找了好久，原網址已經不記得了。 /* 設定滾動條的樣式 */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* 滾動槽 */ ::-w

CSS設定滾動條樣式

/* 設定滾動條的樣式 */ ::-webkit-scrollbar { width:12px; } /* 滾動槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(0,0,0,0.3); border-radius:10px;

CSS設定滾動條樣式（相容IE）

廢話不多說，直接上demo，最下面有詳細註釋。 1、這是在webkit瀏覽器下顯示的樣式。（個人比較喜歡簡約點的） 2、在IE瀏覽器下顯示的樣式（為了區分所以樣式寫的不一

css自定義滾動條樣式

/* 自定義滾動條樣式開始 */ #student_unit_div::-webkit-scrollbar { width:8px; height:8px; } #student_unit_div::-webkit-scrollbar-track {

CSS3自定義滾動條樣式 -webkit-scrollbar

play 偽類 thumb area 沒有 :link 現在自定義滾動條 box ::-webkit-scrollbar {/*隱藏滾輪*/display: none;} 前言 webkit支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定

使用CSS美化Chrome下的滾動條樣式

相關推薦