瀏覽器滾動條樣式還能夠改變，你知道嗎？

時間 2019-12-13

原文原文鏈接

有時候，咱們是否是以爲瀏覽器默認的滾動條很low，那麼瀏覽器滾動條樣式可否改變呢，答案是確定的，今天就給你們分享一下怎麼改變瀏覽器的默認滾動條，讓咱們的頁面更加炫酷。css

在次以前，咱們先來了解一下滾動條產生的緣由，通俗的來說就是內容超出容器就會出現滾動條。html

verflow介紹

<h5>定義：overflow 屬性指定當它溢出其塊級容器時,是否剪輯內容，渲染滾動條或顯示內容。
屬性值web

overflow:visible    //默認值。內容不會被修剪，超出內容會顯示在元素框以外
overflow:hidden     //內容會被修剪。超出內容被隱藏
overflow:scroll     //內容會被修剪，瀏覽器會顯示滾動條以便查看其他內容
overflow:auto       //若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容
overflow:inherit    //規定從該父元素繼承overflow屬性的值`

注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值「inherit」。
當overflow設爲除默認值（visible）之外的值時，將會建立一個會塊級式化上下文（清除浮動的一種方式），更多可查看深刻理解BFC和Margin Collapse瀏覽器

下面直接進入教程，以Google瀏覽器爲例：

效果圖：url

webkit內核的瀏覽器滾動條樣式

首先給兩個div，兩個div是父子關係，裏面的div寬高比外面的寬高值大，再加上overflow：hidd屬性模擬出現滾動條效果，而後進行css更改樣式。 spa

html部分 3d

<style>
    #scrollbar {
        width:300px;
        height:300px;
        overflow:auto;
        float: left;
    }
    #scrollbar div {
        width:800px;
        height:2000px;
    }
</style>
<body>
    <div id='scrollbar'>    
        <div ></div>   
    </div>
</body>

css樣式code

<style>
    #scrollbar::-webkit-scrollbar             {   滾動條總體部分，其中的屬性有width,height,background,border（就和一個塊級元素同樣）等。
        width:12px;
        height:12px;
    }
    #scrollbar::-webkit-scrollbar-button      {   滾動條兩端的按鈕。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
        width:12px;
        height:12px;
    }
    #scrollbar::-webkit-scrollbar-track       {   外層軌道。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
      background: #232428;
      border-radius: 20px;

    }
    #scrollbar::-webkit-scrollbar-track-piece {   內層軌道，滾動條中間部分（除去）。
      background: #232428;
      border-radius: 20px;
    }
    #scrollbar::-webkit-scrollbar-thumb       {   滾動條裏面能夠拖動的那部分
        background:#85868B;
        border-radius:50px;
    }
    #scrollbar::-webkit-scrollbar-corner      {   邊角
        background:#fff;
    }
    #scrollbar::-webkit-scrollbar-resizer     {   定義右下角拖動塊的樣式
        background:#fff; 
    }
  </style>

這裏給你們作了個圖,方便你們理解：htm

自定義IE瀏覽器滾動條樣式

IE瀏覽器，就比較簡單了，直接定義整個頁面的滾動條，但IE瀏覽器只能更換顏色不能設置背景顏色。繼承

body {
   scrollbar-arrow-color: #f4ae21;                /*三角箭頭的顏色*/

   scrollbar-face-color: #333;                    /*立體滾動條的顏色*/

   scrollbar-3dlight-color: #666;                 /*立體滾動條亮邊的顏色*/
 
   scrollbar-highlight-color: #666;               /*滾動條空白部分的顏色*/

   scrollbar-shadow-color: #999;                  /*立體滾動條陰影的顏色*/

   scrollbar-darkshadow-color: #666;              /*立體滾動條強陰影的顏色*/

   scrollbar-track-color: #666;                   /*立體滾動條背景顏色*/

   scrollbar-base-color:#f8f8f8;                  /*滾動條的基本顏色*/

   Cursor:url(mouse.cur);                         /*自定義個性鼠標*/
 }