純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式
發(fā)布時(shí)間：2014-04-17 14:08:15 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式,需要的朋友可以參考下
基于webkit的瀏覽器現(xiàn)在可以自定義其滾動(dòng)條的樣式了，實(shí)現(xiàn)代碼如下：
復(fù)制代碼
代碼如下:::-webkit-scrollbar/*整體部分*/
{
width: 10px;
height:10px;
}
::-webkit-scrollbar-track/*滑動(dòng)軌道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb/*滑塊*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover/*滑塊效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
效果：
相關(guān)文章
純css修改瀏覽器scrollbar滾動(dòng)條樣式示例
這篇文章主要介紹了純css修改瀏覽器scrollbar滾動(dòng)條樣式示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-23CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼
這篇文章主要介紹了CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-06
這篇文章主要介紹了css3自定義滾動(dòng)條樣式寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-25
本篇文章主要介紹了CSS3自定義滾動(dòng)條樣式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-21- 使用CSS樣式設(shè)置div滾動(dòng)條，直接充當(dāng)了文本框的角色，下面為大家介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下2013-12-24
本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中，自定義一個(gè)橫向以及一個(gè)縱向的滾動(dòng)條。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2018-11-26
