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>

参考

纯css美化滚动条样式的更多相关文章

  1. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  2. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  3. CSS设置滚动条样式[转]

    原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

  4. 转载自前端开发：CSS设置滚动条样式

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

  5. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  6. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  7. CSS 个性化滚动条样式

    页面中有许多内容过多时,为了不影响整体布局,总会有滚动效果代替.but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊,怎么办,当然作为界面的化妆师CSS就出手啦~ 滚动条样式由多个伪类组成 下 ...

  8. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

  9. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  10. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

随机推荐

  1. 企业快速落地IT服务管理体系的六大关键步骤

    许多企业在实施信息化战略时,一味地追求"技术高消费"而忽视了对信息技术的管理和内部业务流程的变革,侧重点仍然只是事后的技术支持和故障解决方面,随着企业对于信息技术的依赖程度的加重, ...

  2. Dell服务器配置RIAD并创建热备盘

    在系统启动期间,按F2键进入System Setup(系统设置)主菜单 单击Device Settings(设备设置). 单击所需的RAID controller(RAID控制器)设备. 4.单击Co ...

  3. Xcode编译错误看不到错误详情

    问题描述 Xcode提示错误后想详细看报错信息无论如何双击都不见弹出错误详情. 解决办法 不知道是bug还是苹果婊又自作主张改变用户习惯了,需要点击navigator最右边的一个图标,在里面找到相应的 ...

  4. linux下后台运行程序

    文章目录 背景 nohup命令 setsid命令 pm2 背景 后台运行程序的时候,如果退出当前的终端(session),你运行的所有程序(包括后台程序),都将被关闭. 原因是:你运行的程序都是你的终 ...

  5. 图最短路径之BellmanFord

    Bellman–Ford Algorithm 算法参考地址:Bellman–Ford Algorithm | DP-23 - GeeksforGeeks 算法的简介 在图中给定一个图形和一个源顶点 s ...

  6. 高通Android Cam-x Actuator Bring up

    高通Android Camera Bring Up Actuator reference:https://blog.csdn.net/mr_zjc/article/details/105736925 ...

  7. Python 潮流周刊#58：最快运行原型的语言（摘要）

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  8. 全国产！瑞芯微RK3568J/RK3568B2工业核心板规格书

    核心板简介 创龙科技SOM-TL3568是一款基于瑞芯微RK3568J/RK3568B2处理器设计的四核ARM Cortex-A55全国产工业核心板,每核主频高达1.8GHz/2.0GHz.核心板CP ...

  9. logo描边

  10. python实用总结

    Python3 常用工具 1. 命令行快速搭建本地http服务器 python3 -m http.server 8000 在命令行中输入此命令,就会在当前目录下搭建http服务器,可以通过访问http ...