数十种自定义多彩多样滚动条样式

c端开发过程中有没有遇到过因为原生滚动条的样式问题，让整个项目事倍功半；有没有遇到过因为因为默认滚动条的缘故，被客户说页面做得真chou，一条毁所有呀。

接下来，下面你看到的，就是完美解决方案！当然，有这么多，不限制于这么多，随意修改，百花盛开。

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>

搬你想搬，盖你所需，码字不易，且行且珍惜！

我们深入探索技术新领域的过程中，总会碰到一些意想不到的惊喜，这些新发现挑战着我们原有的认知，并为我们的开发工作开辟了新天地。最近，在审视我所负责的项目时，我注意到了一个小小的但极为关键的改变，这让我不得不重新思考我对于CSS滚动条样式的理解，并深刻感受到了技术进步带来的乐趣。

这个问题起初很简单：我的滚动条与团队其他成员设计的UI风格显得格格不入。经过仔细比较和研究后，我意识到了问题所在——scrollbar-color和scrollbar-width这两个CSS属性。在我经常使用的Chrome浏览器中，这些属性以前是不支持的。但是，随着Chrome浏览器更新到121版本，情况发生了翻天覆地的变化。

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

这个变化不仅意味着我们现在可以使用标准的CSS属性来定制美观的滚动条，而且标志着我们在创造更加统一和互动的用户体验方面向前迈出了一大步。在过去，要在Chrome上实现自定义滚动条效果，我们不得不依赖于::-webkit-*伪选择器，这种做法虽然可以工作，但因其仅在Chrome和Safari上有效，而Firefox不支持，因此其局限性和不一致性一直受到批评。

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版本之后，继续使用::-webkit-*伪选择器可能会导致样式与预期不符，更多详情可以在Chrome开发者文档中查阅。

为了适应这种变化，我们可以将新的滚动条属性应用于body元素，确保在Chrome中的兼容性，即便是Firefox可能还未完全支持这些属性。

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

通过查阅资料，我了解到Chrome团队最近发布了一篇博客文章，详细介绍了这项改变。这篇文章不仅让我们有机会深入了解滚动条样式是如何受到操作系统影响的，还提供了一个快速应对策略：对于不支持::-webkit-*伪选择器的浏览器，我们可以通过添加一个@supports规则来检测并应用新的滚动条属性。

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;
}

/* 针对不支持::-webkit-scrollbar-*的浏览器的样式调整 */
@supports not (selector(::-webkit-scrollbar)) {
    html {
        scrollbar-width: auto;
        scrollbar-color: #bbb #bbb;
    }
}

看到这里，还不快快去看看自己项目的滚动条有没有问题

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

例

标记一个内联框架：

浏览器支持

所有主流浏览器都支持 <iframe> 标签。

标签定义及使用说明

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

提示和注释

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

提示：使用 CSS 为 <iframe> （包括滚动条）定义样式。

HTML 4.01 与 HTML5之间的差异

HTML5 新增了一些新的属性，同时去掉了 HTML 4.01 中的一些属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已被废弃，并将被去掉。请使用 id 属性代替。

属性

New ：HTML5 中的新属性。

属性	值	描述
align	leftrighttopmiddlebottom	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>。
frameborder	10	HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height	pixels	规定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。规定一个页面，该页面包含了有关 <iframe> 的较长描述。
marginheight	pixels	HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth	pixels	HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
name	name	规定 <iframe> 的名称。
sandboxNew	""allow-formsallow-same-originallow-scriptsallow-top-navigation	对 <iframe> 的内容定义一系列额外的限制。
scrolling	yesnoauto	HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNew	seamless	规定 <iframe> 看起来像是父文档中的一部分。
src	URL	规定在 <iframe> 中显示的文档的 URL。
srcdocNew	HTML_code	规定页面中的 HTML 内容显示在 <iframe> 中。
width	pixels	规定 <iframe> 的宽度。

全局属性

事件属性

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：27响应式网站欣赏
下一篇：WebStorm的入门使用介绍总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

数十种自定义多彩多样滚动条样式

您的项目需求