纯css美化滚动条样式

2021-05-07 23:52:20 阅读：243 来源： 互联网

标签：color 滚动条 Python scrollbar css background webkit 美化

自己完善自己博客再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
例子

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

标签：color,滚动条,Python,scrollbar,css,background,webkit,美化
来源： https://blog.51cto.com/u_15193557/2760333

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

纯css美化滚动条样式

方法！

webkit内核浏览器

IE浏览器

Firefox