CSS3特性修改(自訂)瀏覽器預設捲軸

標籤：class   ref   png   pre   idt   陰影   nbsp   元素   ima   

前言：我們做前端時，會遇到一些需求，要求把預設瀏覽器的捲軸樣式給改寫了，誒。好好的改它幹啥了，也帶不來使用者體驗，就是好看點嘛！實現原理其實是用了虛擬元素，webkit的虛擬元素實現很強，可以把捲軸當成一個頁面元素來定義，再結合一些CSS3屬性，比如圓角、漸層、rgba等等。最常見的虛擬元素，我們最熟悉的元素之前和元素之後（::before/::after）【偽類（:hover/:link）】。這裡寫了一個Demo，來看看...

一、HTML

<div class="banner_box"></div>

二、CSS　

    <style>            .banner_box {                width: 100%;                height: 2000px;            }            /*捲軸樣式*/            /*捲軸整體部分*/                        ::-webkit-scrollbar {                width: 8px;            }            /*捲軸小方塊*/                        ::-webkit-scrollbar-thumb {                background-color: rgba(0, 0, 0, 0.6);                 -webkit-border-radius: 5px;    /* Safari 和 Chrome */                -moz-border-radius: 5px;    /* Firefox */                -o-border-radius: 5px;        /* Opera */                border-radius: 5px;                            }            /*滾動軌道兩端按鈕*/            ::-webkit-scrollbar-button {                -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1);                 /*border-radius: 10px;*/                  background-color: #555;              }            /*滾動軌道 內陰影*/                        ::-webkit-scrollbar-track {                -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);                 /*border-radius: 10px;*/                  background-color: #F5F5F5;              }     </style>

 

　三、結果

 

總結：這種CSS特性，可惜不被IE和Firefox相容，其他的都能看到結果，另外還有一種辦法，通過div去改寫捲軸。

CSS3特性修改(自訂)瀏覽器預設捲軸