...">
瀏覽量:151次
在webkit下的css滾動條樣式代碼是怎樣的呢?下面就讓我們一起來了解一下吧:
在現(xiàn)在的絕大部分項目中很多都會用到滾動條,有時候用會到模擬的滾動條或css滾動條,比較常見的就是css滾動條,并且在所有瀏覽器,滾動條可定制性較強的應(yīng)該是webkit內(nèi)核的瀏覽器。
在webkit下面的CSS設(shè)置滾動條主要是有7個屬性,具體介紹如下:
1、::-webkit-scrollbar 滾動條整體部分,能夠設(shè)置寬度等
2、::-webkit-scrollbar-button 滾動條兩端的按鈕
3、::-webkit-scrollbar-track? 外層軌道
4、::-webkit-scrollbar-track-piece? 內(nèi)層滾動槽
5、::-webkit-scrollbar-thumb 滾動的滑塊
6、::-webkit-scrollbar-corner 邊角
7、::-webkit-resizer 定義右下角拖動塊的樣式
參考范例:
css滾動條樣式代碼如下:
li {
? ? ? width: 260px;
? ? ? height: 370px;
? ? ? border: 1px solid #D9D9D9;
? ? ? overflow-y: scroll;
? ? ? &::-webkit-scrollbar {
? ? ? ? width: 3px;
? ? ? }
? ? ? &::-webkit-scrollbar-thumb {
? ? ? ? background: #d8d8d8;
? ? ? ? border-radius: 10px;
? ? ? }
? ? ? &::-webkit-scrollbar-track-piece {
? ? ? ? background: transparent;
? ? ? }
? ? }
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息,此類稿件不代表本網(wǎng)觀點,本網(wǎng)不承擔此類稿件侵權(quán)行為的連帶責任。故此,如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán),請您的相關(guān)內(nèi)容發(fā)至此郵箱【779898168@qq.com】,我們在確認后,會立即刪除,保證您的版權(quán)。
官網(wǎng)優(yōu)化
整站優(yōu)化
渠道代理
400-655-5776