纯css美化滚动条样式

最新推荐文章于 2024-04-10 23:48:49 发布

emperinter

最新推荐文章于 2024-04-10 23:48:49 发布

阅读量1.6k

点赞数 1

分类专栏： Blog 文章标签： css html css3 html5

本文链接：https://blog.csdn.net/emperinter/article/details/108913917

版权

Blog 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

https://www.emperinter.info/2020/09/20/scrollbar-in-browser/

自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式！当然就会使用到滚动条了，而默认的滚动条有多丑大家清楚吧！就搜到了纯CSS美化滚动条样式的方法！

方法！

webkit内核浏览器

Webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。

可选项

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平)
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

改变浏览器默认的滚动条样式：

::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}

给特定的div模块修改滚动条的样式,比如我们给class名为emperinter的添加滚动条样式:

.emperinter::-webkit-scrollbar {
 width: 8px;
}
 .emperinter::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .emperinter::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}

IE浏览器

scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   
scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   
scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/

Firefox

这个貌似原生提供的很少，只找到两个属性！比较难啃，有纯CSS实现的方法麻烦留言。我找到的属性具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars

scrollbar-color
scrollbar-width
例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>滚动条样式</title>
    <style>
		.scroller {
		  width: 100%;
		  height: 500px;
		  overflow-y: scroll;
		  scrollbar-color: rebeccapurple green;
		  scrollbar-width: thin;
		}
		.content{
			font-size:38px;
			color: chocolate;
			margin-left: 50px;
			margin-right: 50px;
			padding: 20px;
			background-color: aliceblue;
		}
    </style>
	
	
  </head>
  <body>
   <!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars -->
	   <div class="scroller">
		   <div class="content">
			   Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
			   welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
			   Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
			   tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
			   Dandelion cucumber earthnut pea peanut soko zucchini.
			   Python3 简介
			   
			   Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。
			   
			   Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些标点符号，它具有比其他语言更有特色语法结构。
			   
			       Python 是一种解释型语言： 这意味着开发过程中没有了编译这个环节。类似于PHP和Perl语言。
			   
			       Python 是交互式语言： 这意味着，您可以在一个 Python 提示符 >>> 后直接执行代码。
			   
			       Python 是面向对象语言: 这意味着Python支持面向对象的风格或代码封装在对象的编程技术。
			   
			       Python 是初学者的语言：Python 对初级程序员而言，是一种伟大的语言，它支持广泛的应用程序开发，从简单的文字处理到 WWW 浏览器再到游戏。
			   
		   </div>
	   </div>
  </body>
</html>

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars

emperinter

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css美化滚动条样式

https://www.emperinter.info/2020/09/20/scrollbar-in-browser/自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式！当然就会使用到滚动条了，而默认的滚动条有多丑大家清楚吧！就搜到了纯CSS美化滚动条样式的方法！方法！webkit内核浏览器Webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。可选项::-webkit-sc
复制链接

扫一扫