修改瀏覽器滾動條樣式

時間 2019-11-08

原文原文鏈接

1 前言

瀏覽器的滾動條樣式固定，有時候跟咱們項目十分不符合，這時候就須要咱們自定義滾動條的樣式了，目前暫時只有谷歌瀏覽器支持自定義滾動條。html

2 經過三個僞類選擇器修改滾動條樣式

滾動條由三部分樣式組成，分別是：git

element::-webkit-scrollbar //滾動條總體樣式
element::-webkit-scrollbar-track //滾動條內部滑軌
element::-webkit-scrollbar-thumb //滾動條內部滑塊
複製代碼

element表示須要修改滾動條的元素，例如想修改整個頁面的滾動條，那element就是body元素。github

3 修改頁面全部元素的橫向縱向滾動條樣式

首先在頁面中定義一個較長的元素來查看效果。web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #app {
                height:3000px;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
複製代碼

此時滾動條樣式：瀏覽器

而後定義全部元素滾動條樣式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #app {
            	height: 3000px;
            }

            *::-webkit-scrollbar {
                /*滾動條總體樣式*/
                width: 8px;/*定義縱向滾動條寬度*/
                height: 8px;/*定義橫向滾動條高度*/
            }

            *::-webkit-scrollbar-thumb {
                /*滾動條內部滑塊*/
                border-radius: 8px;
                background-color: hsla(220, 4%, 58%, 0.3);
                transition: background-color 0.3s;
            }

            *::-webkit-scrollbar-thumb:hover {
                /*鼠標懸停滾動條內部滑塊*/
                background: #bbb;
            }

            *::-webkit-scrollbar-track {
                /*滾動條內部軌道*/
                background: #ededed;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

複製代碼

此時效果：bash

效果圖看起來不太明顯，各位小夥伴本身用瀏覽器打開，效果會更加直觀。app

4 使用SCSS簡寫CSS樣式

SCSS寫多了以後總以爲CSS代碼太多了，不夠簡潔，下面給出SCSS簡化後的代碼，只包含樣式部分（尚未學習SCSS的小夥伴看這裏）。post

* {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: hsla(220, 4%, 58%, 0.3);
    transition: background-color 0.3s;

    &:hover {
      background: #bbb;
    }
  }

  &::-webkit-scrollbar-track {
    background: #ededed;
  }
}
複製代碼