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. Mysql中innodb的B+tree能存储多少数据？

    引言 InnoDB一棵3层B+树可以存放多少行数据?这个问题的简单回答是:约2千万.为什么是这么多呢?因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. 在计 ...

  2. python 文件查找及截取字符串 (替换，分割) demo

    #"F:\\test.txt" ''' # 例1:字符串截取 str = '12345678' print str[0:1] # 例2:字符串替换 str = 'akakak' s ...

  3. FreeRTOS简单内核实现5 阻塞延时

    0.思考与回答 0.1.思考一 为什么 FreeRTOS简单内核实现3 任务管理 文章中实现的 RTOS 内核不能看起来并行运行呢? Task1 延时 100ms 之后执行 taskYIELD() 切 ...

  4. 国内外公共 DNS调研

    结论 国内可以在以下DNS选择:114DNS.阿里DNS.(阿里请联系我,给我广告费^_^) 国外可以在以下DNS选择:谷歌DNS.1.1.1.1 DNS.Cisco Umbrella DNS. 国内 ...

  5. Shell读取整行

    像C/C++,JAVA,Python等语言中,可以轻松地对文件进行按行读取. 那么,Shell中怎么实现对行读取呢? #!/bin/bash while read i do echo $i done ...

  6. 解决keil5仿真错误：Encountered an improper argument

    --- title: 解决keil5仿真错误:Encountered an improper argument date: 2020-06-18 03:13:18 categories: tags: ...

  7. STM32 学习：IAP 简单的IAP例子

    --- title: mcu-stm32-IAP-1-sample date: 2020-05-27 18:21:53 categories: tags: - iap - stm32 --- 章节概述 ...

  8. 使用sqlcel导入数据时出现“a column named '***' already belongs to this datatable”问题的解决办法

    我修改编码为GBK之后,选择导入部分字段,如下: 这样就不会出现之前的问题了,完美 ----------------------------------------------- 但是出现一个问题,我 ...

  9. IOS浏览器返回刷新页面

    $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPage ...

  10. 解决方案 | Citrix Receiver无法正常启动的多种解决方案

    下面是个人在实践过程中总结的解决办法: 方案1:卸载Citrix Receiver(一般通过控制面板卸载,如果正常无法卸载则需要通过官方卸载软件ReceiverCleanupUtility软件卸载), ...