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. 30 岁的程序员，要有 "归零" 心态

    大家好,我是码农先森. 古话说的 "三十而立",正是担重之时,却大部分人在职场中都处于不上不下的尴尬境地.已经没有刚毕业时那股子冲劲,被生活和工作磨平了棱角. 在技术思想方面,似乎 ...

  2. scab2

    package com.cmb.cox.utils;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;im ...

  3. Android自动化-如何获取视图元素属性？

    在做Android自动化时候,我们需要知道视图有哪些元素,元素都有哪些属性,获取到属性我们才能获取到元素从而做自动化控制,所以做Android自动化获取元素属性是必要的第一步 获取视图元素属性最便捷的 ...

  4. Project Euler 1~10 野蛮题解

    这些题都比较简单就不贴代码和做法了 23333333 具体到做法就是枚举暴力,这十题中可能难一点地方的就是筛质数表,可以学习一下 Eratosthenes 筛法或者是欧拉筛. 如果您不会前十题建议好好 ...

  5. java中的即时编译（JIT）简介

    Java发展这么多年一直长青,很大一部分得益于开发人员长期对其坚持不懈的优化:写得更少,跑得更快!JIT就是其中一项十分重要的优化. JIT全程Java Intime Compiler,即Java即时 ...

  6. 推荐常用的Idea插件

    Idea常用快捷键 删除所有空行 使用替换 Ctrl + R 点亮后面的魔法图标启用正则表达式,输入:^\s*\n,然后选择替换全部 查询指定类或方法在哪里被引用 光标点中需要查找的类名和方法名,然后 ...

  7. 详解Web应用安全系列(9)点击劫持

    点击劫持(Clickjacking)漏洞,也被称为界面伪装攻击(UI Redress Attack)或UI覆盖攻击,是一种利用视觉欺骗手段进行的网络攻击方式.这种攻击方式通过技术手段欺骗用户点击他们本 ...

  8. 新一代的团队协作平台-Teamlinker

    Teamlinker是一个集成了不同功能和模块的团队协作平台.你可以联系你的团队成员,分配你的任务,开始一个会议,安排各项事务,管理你的文件等.并且支持线下免费部署,功能和线上版本一致. 主页 对于很 ...

  9. Tiny RDM 刚上线就收获一众好评的Redis桌面开源客户端！值得拥有！

    相信对Redis有频繁操作需求的用户,大部分会选择一个顺手的图形化界面工具来代替手动命令行操作以提高效率.Tiny RDM作为一款现代化轻量级的跨平台Redis桌面客户端,为用户提供了便捷高效的Red ...

  10. 【算法】用c#实现自定义字符串编码及围栏解码方法

    编写一个函数/方法,它接受2个参数.一个字符串和轨道数,并返回ENCODED字符串. 编写第二个函数/方法,它接受2个参数.一个编码字符串和轨道数,并返回DECODED字符串. 然后使用围栏密码对其进 ...