在css樣式中怎麼設置瀏覽器滾動條樣式

在css樣式中怎麼設置瀏覽器滾動條樣式

工具/原料

adobe dreamweaver

方法/步驟

新建html文檔。

書寫hmtl代碼。

<div>在css樣式中怎麼設置瀏覽器滾動條樣式</div>

<div>步驟分兩步:第一步寫外層軌道;第二步寫內層軌道</div>

書寫外層軌道css代碼。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外層軌道*/}

書寫內層軌道css代碼。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*內層軌道*/}

代碼整體結構。

查看效果。

默認樣式參考具體如下圖:

1:scrollbar-face-color(設置滾動框和滾動條箭頭的顏色)

2:scrollbar-highlight-color(設置滾動框的和滾動條箭頭左上邊緣的顏色)

3:scrollbar-shadow-color(設置滾動框的和滾動條箭頭右下邊緣的顏色)

4:scrollbar-3dlight-color(設置滾動框的和滾動條箭頭左上邊緣的顏色)

5:scrollbar-arrow-color(設置滾動條箭頭的顏色)

6:scrollbar-track-color(設置滾動條軌跡組成部分的顏色)

8:scrollbar-dark-shadow-color(設置滾動條槽的顏色)

注意事項

頁面需要根據自己的頁面初始化css樣式,具體根據自己的項目設定標籤默認樣式
詳細的可以參考w3c書寫標準

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場