純css修改瀏覽器scrollbar滾動(dòng)條樣式示例
發(fā)布時(shí)間：2018-11-23 15:42:56 作者：凱迪Wen 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了純css修改瀏覽器scrollbar滾動(dòng)條樣式示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
使用css修改瀏覽器滾動(dòng)條樣式
::-webkit-scrollbar {
width: .5rem;
height: .5rem;
background: hsla(0, 0%, 100%, 0.6);
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: rgba(95,95,95,.4);
transition: all .2s;
border-radius: .5rem;
&:hover {
background-color: rgba(95,95,95, .7);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼
這篇文章主要介紹了CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-06
這篇文章主要介紹了css3自定義滾動(dòng)條樣式寫法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-25
本篇文章主要介紹了CSS3自定義滾動(dòng)條樣式的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-21純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式
這篇文章主要介紹了純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式,需要的朋友可以參考下2014-04-17- 使用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
