webkit內(nèi)核瀏覽器自定義滾動(dòng)條

el09xccxy 發(fā)布于2019-08-29 12:39 / 3283人閱讀

摘要：效果樣式針對(duì)內(nèi)核滾動(dòng)條樣式參考鏈接

效果：

樣式

/* 針對(duì)webkit內(nèi)核滾動(dòng)條樣式*/
.zh-fd-scrollbar::-webkit-scrollbar{width: 10px;height: 10px;background-color: #3D3D46;}
.zh-fd-scrollbar::-webkit-scrollbar-thumb{border-radius: 8px;background-color: #505662;}
.zh-fd-scrollbar::-webkit-scrollbar-thumb:hover{background-color: #5D626C;}
.zh-fd-scrollbar::-webkit-scrollbar-button{width: 8px;height: 8px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:horizontal:start{background: url(../images/bg-group-flight-dynamic.png) no-repeat 0 -120px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:horizontal:end{background: url(../images/bg-group-flight-dynamic.png) no-repeat 3px -129px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:vertical:decrement{background: url(../images/bg-group-flight-dynamic.png) no-repeat 1px -140px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:vertical:increment{background: url(../images/bg-group-flight-dynamic.png) no-repeat 1px -148px;}
.zh-fd-scrollbar::-webkit-scrollbar-corner{background-color: #3D3D46;}

參考鏈接：https://webkit.org/blog/363/s...

云服務(wù)器 GPU云服務(wù)器自定義html滾動(dòng)條自定義進(jìn)度條自定義滾動(dòng)庫(kù) 滾動(dòng)條

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112051.html

相關(guān)文章

webkit內(nèi)核瀏覽器自定義滾動(dòng)條樣式

摘要：滾動(dòng)條兩端的按鈕。內(nèi)層軌道，滾動(dòng)條中間部分除去。有如下功能若是水平滾動(dòng)條，則屬性不起作用，屬性用來(lái)控制滾動(dòng)條相應(yīng)部分豎直方向高度若是豎直滾動(dòng)條，則屬性不起作用，屬性用來(lái)控制相應(yīng)部分的寬度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...

testbird 2019-08-29 12:17 評(píng)論0 收藏0
webkit內(nèi)核瀏覽器自定義滾動(dòng)條樣式

摘要：滾動(dòng)條兩端的按鈕。內(nèi)層軌道，滾動(dòng)條中間部分除去。有如下功能若是水平滾動(dòng)條，則屬性不起作用，屬性用來(lái)控制滾動(dòng)條相應(yīng)部分豎直方向高度若是豎直滾動(dòng)條，則屬性不起作用，屬性用來(lái)控制相應(yīng)部分的寬度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...

Achilles 2019-08-01 16:35 評(píng)論0 收藏0
如何自定義CSS滾動(dòng)條的樣式？

摘要：需求有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動(dòng)條樣式，因?yàn)椴粔蚨ㄖ苹兔烙^(guān)。可設(shè)置豎直水平方向的滾動(dòng)條可以設(shè)置水平方向的滾動(dòng)條，不加默認(rèn)是豎直方向。自定義滾動(dòng)條樣式可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和I...

linkFly 2019-08-02 12:07 評(píng)論0 收藏0
如何自定義CSS滾動(dòng)條的樣式？

摘要：可設(shè)置豎直水平方向的滾動(dòng)條可以設(shè)置水平方向的滾動(dòng)條，不加默認(rèn)是豎直方向。自定義滾動(dòng)條樣式自定義滾動(dòng)條樣式可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中，自定義一個(gè)橫向以及一個(gè)縱向的滾動(dòng)條。 0.需求...

kviccn 2019-04-23 13:09 評(píng)論0 收藏0
如何自定義CSS滾動(dòng)條的樣式？

摘要：需求有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動(dòng)條樣式，因?yàn)椴粔蚨ㄖ苹兔烙^(guān)。可設(shè)置豎直水平方向的滾動(dòng)條可以設(shè)置水平方向的滾動(dòng)條，不加默認(rèn)是豎直方向。自定義滾動(dòng)條樣式可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和I...

leonardofed 2019-08-29 17:22 評(píng)論0 收藏0