數(shù)十種自定義多彩多樣滾動(dòng)條樣式

c端開(kāi)發(fā)過(guò)程中有沒(méi)有遇到過(guò)因?yàn)樵鷿L動(dòng)條的樣式問(wèn)題，讓整個(gè)項(xiàng)目事倍功半；有沒(méi)有遇到過(guò)因?yàn)橐驗(yàn)槟J(rèn)滾動(dòng)條的緣故，被客戶說(shuō)頁(yè)面做得真chou，一條毀所有呀。

接下來(lái)，下面你看到的，就是完美解決方案！當(dāng)然，有這么多，不限制于這么多，隨意修改，百花盛開(kāi)。

Demo1

css源碼

.srcoll_one::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #4078cb;
}

html源碼

<div class="srcoll_one">
 <div class="item"></div>
</div>

Demo2

css源碼

.srcoll_two::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_two::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_two::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
}

html源碼

<div class="srcoll_two">
 <div class="item"></div>
</div>

Demo3

css源碼

.srcoll_three::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_three::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_three::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
}

html源碼

<div class="srcoll_three">
 <div class="item"></div>
</div>

Demo4

css源碼

.srcoll_four::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
}

html源碼

<div class="srcoll_four">
 <div class="item"></div>
</div>

Demo5

css源碼

.srcoll_five::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar{
 width: 6px;
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar-thumb{
	background-color: #000000;
}

html源碼

<div class="srcoll_five">
 <div class="item"></div>
</div>

Demo6

css源碼

.srcoll_six::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar-thumb{
 background-color: #000000;
 border: 2px solid #555555;
}

html源碼

<div class="srcoll_six">
 <div class="item"></div>
</div>

Demo7

css源碼

.srcoll_seven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar-thumb{
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
}

html源碼

<div class="srcoll_seven">
 <div class="item"></div>
</div>

Demo8

css源碼

.srcoll_eight::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar-thumb{
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

<div class="srcoll_eight">
 <div class="item"></div>
</div>

Demo9

css源碼

.srcoll_nine::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_nine::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_nine::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
}

html源碼

<div class="srcoll_nine">
 <div class="item"></div>
</div>

Demo10

css源碼

.srcoll_ten::-webkit-scrollbar-track{
 border: 1px solid black;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar-thumb{
	background-color: #000000;
}

html源碼

 <div class="srcoll_ten">
 <div class="item"></div>
</div>

Demo11

css源碼

.srcoll_eleven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar-thumb{
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

<div class="srcoll_eleven">
 <div class="item"></div>
</div>

Demo12

css源碼

.srcoll_twelve::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_twelve::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_twelve::-webkit-scrollbar-thumb{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

<div class="srcoll_twelve">
 <div class="item"></div>
</div>

Demo13

css源碼

.srcoll_thirteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_thirteen::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_thirteen::-webkit-scrollbar-thumb{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
}

html源碼

<div class="srcoll_thirteen">
 <div class="item"></div>
</div>

Demo14

css源碼

.srcoll_fourteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
}
.srcoll_fourteen::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_fourteen::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
}

html源碼

<div class="srcoll_fourteen">
 <div class="item"></div>
</div>

搬你想搬，蓋你所需，碼字不易，且行且珍惜！

我們深入探索技術(shù)新領(lǐng)域的過(guò)程中，總會(huì)碰到一些意想不到的驚喜，這些新發(fā)現(xiàn)挑戰(zhàn)著我們?cè)械恼J(rèn)知，并為我們的開(kāi)發(fā)工作開(kāi)辟了新天地。最近，在審視我所負(fù)責(zé)的項(xiàng)目時(shí)，我注意到了一個(gè)小小的但極為關(guān)鍵的改變，這讓我不得不重新思考我對(duì)于CSS滾動(dòng)條樣式的理解，并深刻感受到了技術(shù)進(jìn)步帶來(lái)的樂(lè)趣。

這個(gè)問(wèn)題起初很簡(jiǎn)單：我的滾動(dòng)條與團(tuán)隊(duì)其他成員設(shè)計(jì)的UI風(fēng)格顯得格格不入。經(jīng)過(guò)仔細(xì)比較和研究后，我意識(shí)到了問(wèn)題所在——scrollbar-color和scrollbar-width這兩個(gè)CSS屬性。在我經(jīng)常使用的Chrome瀏覽器中，這些屬性以前是不支持的。但是，隨著Chrome瀏覽器更新到121版本，情況發(fā)生了翻天覆地的變化。

html {
    scrollbar-width: auto;
    scrollbar-color: #aaa #aaa;
}

這個(gè)變化不僅意味著我們現(xiàn)在可以使用標(biāo)準(zhǔn)的CSS屬性來(lái)定制美觀的滾動(dòng)條，而且標(biāo)志著我們?cè)趧?chuàng)造更加統(tǒng)一和互動(dòng)的用戶體驗(yàn)方面向前邁出了一大步。在過(guò)去，要在Chrome上實(shí)現(xiàn)自定義滾動(dòng)條效果，我們不得不依賴于::-webkit-*偽選擇器，這種做法雖然可以工作，但因其僅在Chrome和Safari上有效，而Firefox不支持，因此其局限性和不一致性一直受到批評(píng)。

html {
	overflow: overlay;
	scrollbar-color: #6d7c77 #cfd7c7;
	scrollbar-width: auto;
}

body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb-color);
	border-radius: 10px;
}

body::-webkit-scrollbar-track {
	background: var(--scroll-track-color);
	border-radius: 10px;
}

在Chrome 121版本之后，繼續(xù)使用::-webkit-*偽選擇器可能會(huì)導(dǎo)致樣式與預(yù)期不符，更多詳情可以在Chrome開(kāi)發(fā)者文檔中查閱。

為了適應(yīng)這種變化，我們可以將新的滾動(dòng)條屬性應(yīng)用于body元素，確保在Chrome中的兼容性，即便是Firefox可能還未完全支持這些屬性。

body {
    scrollbar-width: auto;
    scrollbar-color: #aaa #aaa;
}

通過(guò)查閱資料，我了解到Chrome團(tuán)隊(duì)最近發(fā)布了一篇博客文章，詳細(xì)介紹了這項(xiàng)改變。這篇文章不僅讓我們有機(jī)會(huì)深入了解滾動(dòng)條樣式是如何受到操作系統(tǒng)影響的，還提供了一個(gè)快速應(yīng)對(duì)策略：對(duì)于不支持::-webkit-*偽選擇器的瀏覽器，我們可以通過(guò)添加一個(gè)@supports規(guī)則來(lái)檢測(cè)并應(yīng)用新的滾動(dòng)條屬性。

body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
    background: var(--custom-thumb-color);
    border-radius: 16px;
}

body::-webkit-scrollbar-track {
    background: var(--custom-track-color);
    border-radius: 16px;
}

/* 針對(duì)不支持::-webkit-scrollbar-*的瀏覽器的樣式調(diào)整 */
@supports not (selector(::-webkit-scrollbar)) {
    html {
        scrollbar-width: auto;
        scrollbar-color: #bbb #bbb;
    }
}

看到這里，還不快快去看看自己項(xiàng)目的滾動(dòng)條有沒(méi)有問(wèn)題

作者：BrittanyZ
鏈接：https://juejin.cn/post/7330826811491287059

例

標(biāo)記一個(gè)內(nèi)聯(lián)框架：

瀏覽器支持

所有主流瀏覽器都支持 <iframe> 標(biāo)簽。

標(biāo)簽定義及使用說(shuō)明

一個(gè)內(nèi)聯(lián)框架被用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)文檔。

提示和注釋

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應(yīng)對(duì)不支持 <iframe> 的瀏覽器。

提示：使用 CSS 為 <iframe> （包括滾動(dòng)條）定義樣式。

HTML 4.01 與 HTML5之間的差異

HTML5 新增了一些新的屬性，同時(shí)去掉了 HTML 4.01 中的一些屬性。

HTML 與 XHTML 之間的差異

在 XHTML 中，name 屬性已被廢棄，并將被去掉。請(qǐng)使用 id 屬性代替。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
align	leftrighttopmiddlebottom	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定如何根據(jù)周?chē)脑貋?lái)對(duì)齊 <iframe>。
frameborder	10	HTML5 不支持。規(guī)定是否顯示 <iframe> 周?chē)倪吙颉?/td>
height	pixels	規(guī)定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。規(guī)定一個(gè)頁(yè)面，該頁(yè)面包含了有關(guān) <iframe> 的較長(zhǎng)描述。
marginheight	pixels	HTML5 不支持。規(guī)定 <iframe> 的頂部和底部的邊距。
marginwidth	pixels	HTML5 不支持。規(guī)定 <iframe> 的左側(cè)和右側(cè)的邊距。
name	name	規(guī)定 <iframe> 的名稱。
sandboxNew	""allow-formsallow-same-originallow-scriptsallow-top-navigation	對(duì) <iframe> 的內(nèi)容定義一系列額外的限制。
scrolling	yesnoauto	HTML5 不支持。規(guī)定是否在 <iframe> 中顯示滾動(dòng)條。
seamlessNew	seamless	規(guī)定 <iframe> 看起來(lái)像是父文檔中的一部分。
src	URL	規(guī)定在 <iframe> 中顯示的文檔的 URL。
srcdocNew	HTML_code	規(guī)定頁(yè)面中的 HTML 內(nèi)容顯示在 <iframe> 中。
width	pixels	規(guī)定 <iframe> 的寬度。

全局屬性

事件屬性

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：27響應(yīng)式網(wǎng)站欣賞
下一篇：WebStorm的入門(mén)使用介紹總結(jié)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

數(shù)十種自定義多彩多樣滾動(dòng)條樣式

您的項(xiàng)目需求