优雅实用!15种CSS滚动条样式,让你的页面更时尚。

作者:昌都麻将开发公司 阅读:28 次 发布时间:2025-05-21 23:34:46

摘要:近年来,随着网页设计日益成熟,用户对网页的要求也越来越高。而滚动条作为用户访问网页时最常接触的元素,也需要被重视。今天,我们将围绕“CSS滚动条样式”这个主题,为大家带来15种优雅实用的CSS滚动条样式,让你的页面更时尚。1. 默认滚动条样式首先我们来了解一下浏览器...

近年来,随着网页设计日益成熟,用户对网页的要求也越来越高。而滚动条作为用户访问网页时最常接触的元素,也需要被重视。今天,我们将围绕“CSS滚动条样式”这个主题,为大家带来15种优雅实用的CSS滚动条样式,让你的页面更时尚。

优雅实用!15种CSS滚动条样式,让你的页面更时尚。

1. 默认滚动条样式

首先我们来了解一下浏览器自带的默认滚动条样式。默认滚动条的样式可能会因浏览器差异而有所不同,但大多数浏览器会在滚动条上方添加一定的阴影效果,同时滚动条的颜色和宽度也存在差异。例如,Chrome浏览器的默认滚动条样式如下:

```

::-webkit-scrollbar {

width: 8px;

height: 8px;

background-color: #f5f5f5;

}

::-webkit-scrollbar-thumb {

background-color: #c1c1c1;

}

```

2. 隐藏滚动条样式

若希望隐藏滚动条,可以采用以下样式来实现:

```

body {

overflow: hidden;

}

```

但这种方式不允许用户操作滚动条,因此如果需要实现滚动功能,建议采用其他方式。

3. 自定义滚动条样式

在正式介绍本文的15种CSS滚动条样式之前,我们需要先了解一下如何自定义滚动条样式。

滚动条的样式设计主要是通过以下CSS伪类选择器来完成:

```

::-webkit-scrollbar:浏览器自带滚动条样式

::-webkit-scrollbar-track:滚动条背景样式

::-webkit-scrollbar-thumb:滚动条上移动块样式,用于显示滚动条上拖动的块

::-webkit-scrollbar-button:滚动条上的按钮样式(上、下、左、右)

::-webkit-scrollbar-corner:滚动条的四角样式

```

基本上,我们可以通过组合以上伪类选择器来实现更多的滚动条样式。

下面,我们就着手介绍本文的15种CSS滚动条样式吧!

4. 弱化滚动条样式

这种滚动条样式减少了滚动条的强烈感,给用户带来更加柔和的体验。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

background: #ebebeb;

}

body::-webkit-scrollbar-thumb {

background: #d6d6d6;

border-radius: 2px;

&:hover {

background: #a9a9a9;

}

}

```

5. 扁平滚动条样式

扁平滚动条样式让滚动条看起来更加扁平化,同时为用户提供了更好的触感和控制能力。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

background: #f2f2f2;

}

body::-webkit-scrollbar-thumb {

background: #babac0;

border-radius: 16px;

border: 4px solid #f2f2f2;

&:hover {

background: #a0a0a5;

}

}

```

6. 全透明滚动条样式

全透明滚动条样式隐藏了滚动条背景色,仅仅显示滚动块本身的样式。

```

body::-webkit-scrollbar {

width: 6px;

background-color: transparent;

}

body::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.5);

border-radius: 3px;

}

```

7. 渐变色滚动条样式

这种滚动条样式采用渐变颜色,让页面看起来更加时尚和美观。

```

body::-webkit-scrollbar {

background-color: #f2f2f2;

width: 8px;

}

body::-webkit-scrollbar-thumb {

border-radius: 8px;

box-shadow: none;

background-image: linear-gradient(

to bottom,

#f4f4f4 0%,

#dadada 100%

);

border: 2px solid #f2f2f2;

}

```

8. 双色滚动条样式

这种滚动条样式呈双色分层,能够增加滚动条的立体感。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

box-shadow: inset 0 0 5px grey;

border-radius: 10px;

background-color: #f5f5f5;

}

body::-webkit-scrollbar-thumb {

background-color: #4286f4;

border-radius: 10px;

box-shadow: 0 0 15px #4286f4;

}

```

9. 3D滚动条样式

这种滚动条样式采用了3D的效果,给用户带来更加立体的视觉体验。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-thumb {

background-color: rgba(126, 127, 131, 0.5);

border-radius: 10px;

box-shadow: inset 0px 0px 0px 4px #85888c,

inset 0px 0px 0px 5px #cdd1d6, inset 0px 0px 0px 6px #ccced3,

inset 0px 0px 0px 8px #f4f4f4, 0px 2px 2px rgba(0, 0, 0, 0.2);

}

```

10. 小方块滚动条样式

这种滚动条样式将滚动块变成了一个小方块,线条鲜明,让滚动条更加可见。

```

body::-webkit-scrollbar {

width: 10px;

height: 10px;

}

body::-webkit-scrollbar-thumb {

border-radius: 2px;

background-color: #ccc;

}

body::-webkit-scrollbar-thumb:hover {

background-color: #aaa;

}

```

11. 刺绣滚动条样式

这种滚动条样式采用了刺绣织物的效果,让滚动条看起来更有质感。

```

body::-webkit-scrollbar {

width: 10px;

height: 10px;

background-color: #f4f4f4;

}

body::-webkit-scrollbar-thumb {

background-color: #989898;

background-image: linear-gradient(

-45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

),

linear-gradient(

45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

);

background-size: 30px 30px;

border-radius: 2px;

}

```

12. 圆角滚动条样式

这种滚动条样式将滚动块和滚动条的轨道都变成了圆角,让页面看起来更加柔和。

```

body::-webkit-scrollbar {

width: 14px;

height: 14px;

}

body::-webkit-scrollbar-track {

border-radius: 7px;

background-color: #f1f1f1;

}

body::-webkit-scrollbar-thumb {

border-radius: 7px;

background-color: #888;

}

```

13. 亮色悬浮滚动条样式

这种滚动条样式采用了亮色悬浮效果,让滚动条看起来更加现代化。

```

body::-webkit-scrollbar {

width: 6px;

background-color: transparent;

}

body::-webkit-scrollbar-thumb {

background-color: #000;

opacity: 0.5;

transition: opacity 0.2s linear;

}

body::-webkit-scrollbar-thumb:hover {

opacity: 1;

}

```

14. 改变滚动条方向

这种滚动条样式将滚动条的方向改变了,让页面看起来更加别致。

```

body {

display: flex;

flex-direction: row;

overflow-y: hidden;

}

body::-webkit-scrollbar {

height: 10px;

}

body::-webkit-scrollbar-track {

background: #f1f1f1;

}

body::-webkit-scrollbar-thumb {

background-color: #888;

}

```

15. 左侧悬浮滚动条样式

这种滚动条样式将滚动条置于页面的左侧,让页面看起来更加特别。

```

.scrollbar::-webkit-scrollbar {

width: 12px;

height: 12px;

background-color: #f5f5f5;

}

.scrollbar::-webkit-scrollbar-thumb {

background-color: #000;

border-radius: 10px;

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

}

.scrollbar {

position: fixed;

left: 0;

top: 0;

height: 100vh;

width: 12px;

}

```

以上就是本文的15种CSS滚动条样式。通过以上的示例,我们可以看出滚动条样式的不同变化,也明确了如何使用CSS来进行样式的自定义。在日常的网页设计中,您也可以根据需要来选择适合自己的滚动条样式。最后,祝愿您在自定义滚动条样式上有所发现,学有所获!

  • 原标题:优雅实用!15种CSS滚动条样式,让你的页面更时尚。

  • 本文链接:https://qipaikaifa.cn/zxzx/8108.html

  • 本文由深圳中天华智网小编,整理排版发布,转载请注明出处。部分文章图片来源于网络,如有侵权,请与中天华智网联系删除。
  • 微信二维码

    ZTHZ2028

    长按复制微信号,添加好友

    微信联系

    在线咨询

    点击这里给我发消息QQ客服专员


    点击这里给我发消息电话客服专员


    在线咨询

    免费通话


    24h咨询☎️:157-1842-0347


    🔺🔺 棋牌游戏开发24H咨询电话 🔺🔺

    免费通话
    返回顶部