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. 消息sms 邮箱/手机号/push发送的方案 & 定时任务xxlJob灵活度 & 泛型和发送的模板类设计

    消息sms 邮箱/手机号/push发送的方案 & 定时任务xxlJob灵活度 & 泛型和发送的模板类设计 1.消息sms 邮箱/手机号/push发送的方案 1.判断收件人地址是否为空, ...

  2. Sqlite windows11 安装与使用

    首先进入Sqlite官方网址: https://www.sqlite.org/download.html 然后下载下面框起来的两个压缩文件 下载完成后解压 接下来去配置环境变量,右键此电脑->属 ...

  3. Nuxt.js 深入浅出：目录结构与文件组织详解

    title: Nuxt.js 深入浅出:目录结构与文件组织详解 date: 2024/6/18 updated: 2024/6/18 author: cmdragon excerpt: 摘要:本文详述 ...

  4. spark读取写入jdbc.,Caused by: java.lang.NoSuchMethodException: org.apache.spark.sql.execution.datasources.jdbc.DriverWrapper.<init>()

    df.write .option("truncate", "true") .option("driver", mysqlDriver) .m ...

  5. 指令（Prompt）基本格式

    指令(Prompt)基本格式: 参考信息:包含文心一言完成任务时需要知道的必要背景和材料,如:报告.知识.数据库.对话上下文等 动作:需要文心一言帮你解决的事情,如:撰写.生成.总结.回答等 目标:需 ...

  6. 硬件开发笔记（二十）：AD21导入外部下载的元器件原理图库、封装库和3D模型

    前言   在硬件设计的过程中,会遇到一些元器件,这些元器件在本地已有的库里面没有,但是可以从外部下载或者获取到对应的.  本篇就是引入TPS54331D电源芯片作为示例,详细描述整个过程.   创建T ...

  7. IT运维全面数字化｜芯片设计行业领跑打造运维流程闭环

    在当今数字化转型的浪潮中,科技行业正经历着前所未有的变革.随着5G.人工智能.物联网等新兴技术的快速发展,企业对于高效.智能的运营模式的需求日益迫切. 芯片设计公司作为科技产业链中的关键一环,不仅要在 ...

  8. ARM 命名规则和ARM 版本

    结论:我们所接触到提到的命名规则,应该分成两类. 基于ARM Architecture版本的"指令集架构"命名规则:例如armv6, armv7, armv7s, arm64 等系 ...

  9. 海思SDK 学习 ：000-海思HI35xx平台软件开发快速入门之背景知识

    背景 参考自:<HiMPP V3.0 媒体处理软件开发参考.pdf> 由于在音视频处理领域,海思芯片占有全球市场的很大份额.当我们选择使用海思芯片开发时,程序开发模型主要是围绕HIMPP( ...

  10. 深度学习领域的名词解释：SOTA、端到端模型、泛化、RLHF、涌现 ..

    SOTA (State-of-the-Art) 在深度学习领域,SOTA指的是"当前最高技术水平"或"最佳实践".它用来形容在特定任务或领域中性能最优的模型或方 ...