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. python rabbitmq官方文档demo

    1.生产者 #!/usr/bin/env python import pika import json # https://www.rabbitmq.com/tutorials/tutorial-on ...

  2. Java代码规范及异常汇总 非空异常 NullPointerException

    Java规范及异常汇总1.java.lang.NullPointerException: nullorderReq.getId() != -1 修改为: orderReq.getId() != nul ...

  3. Java服务发起HTTPS请求报错：PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException

    Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderExcept ...

  4. c++引用（REFERENCES)

    一个例子 void add(int value) { value++; } int main() { int a = 5; LOG(a); add(a); LOG( a); } 在这种情况下,变量a在 ...

  5. 机器学习（一）——递归特征消除法实现SVM（matlab）

    机器学习方法对多维特征数据进行分类:本文用到非常经典的机器学习方法,使用递归特征消除进行特征选择,使用支持向量机构建分类模型,使用留一交叉验证的方法来评判模型的性能. 构建模型:支持向量机(Suppo ...

  6. python globals()[]将字符串转化类，并通过反射执行方法

    背景: 通过关键字设计ui自动化框架,将测试用例及其步骤存放到excel文件:其中步骤中包含了封装好的关键字方法,如打开浏览器.输入页面操作等,关键字保存的内容:具体类实例.方法 通过excel获取到 ...

  7. 处理 3d 视频的简单理论基础

    背景 公司产品需要满足一些带有3d功能的应用场景,需要需要懂得如何处理3d信号.之前在调试以前产品的时候,发现处理3d信号的时候,是由2个画面叠加起来的. 导言 3D视频(或3D信号)为什么是两个画面 ...

  8. uniapp+thinkphp5实现微信支付(JSAPI支付)

    前言 统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返回预支付订单号的接口,目前微信支付所有场景均使用这一接口.下面介绍的是其中JSAPI的支付实现流程与uniapp唤起微信支 ...

  9. logo2

  10. Spring DI(依赖注入)自动装配 @Autowired、@Resource注解

    @Autowired:一部分功能是查找实例,从Spring容器中根据类型(Java类)获取对应的实例:另一部分功能就是赋值,将找到的实例,装配给另一个实例的属性值.(注:一个Java类型在同一个Spr ...