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