CSS设置滚动条样式
今天在写一个项目的时候遇到了,这样一个小难点
要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了
一、我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /只是x方向/
或者
overflow-y:scroll /只是y方向/
当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围。
二、使用scrollbar属性设置滚动条样式::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
详细的css属性
:horizontal 水平方向的滚动条
:vertical 垂直 方向的滚动条
:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:increment decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end 类似于start伪类,标识对象是否放到滑块的后面。
:double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
:no-button 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
:corner-present 用于所有滚动条轨道,指示滚动条圆角是否显示。
:window-inactive 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
示例:
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {background:rgba(255,0,0,0.4);
}
示例:定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸
::-webkit-scrollbar{width:16px;height:16px;background-color:#F5F5F5;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;background-color:#F5F5F5;}/*定义滑块内阴影+圆角*/::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555;}
IE浏览器的滚动条设置
IE下面就比较简单那了,自定义的项目比较少,全是颜色。
- scrollbar-arrow-color: color; /三角箭头的颜色/
- scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/
- scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
- scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/
- scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
- scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
- scrollbar-track-color: color; /立体滚动条背景颜色/
- scrollbar-base-color:color; /滚动条的基色/
三、去除搜索框外面的边框
添加css属性,这样点击时就不会有蓝色边框了{outline:none;}
CSS设置滚动条样式相关推荐
- CSS设置滚动条样式(兼容IE)
废话不多说,直接上demo,最下面有详细注释. 1.这是在webkit浏览器下显示的样式. (个人比较喜欢简约点的) 2.在IE浏览器下显示的样式(为了区分所以样式写的不一样,我 ...
- css设置滚动条样式,隐藏滚动条,设置滚动条宽度及背景色
去掉滚动条: #table_show_content::-webkit-scrollbar{ width: 0px; background: gray; } 设置滚动条粗细: #table_show_ ...
- css设置滚动条的样式
1. webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...
- css设置滚动条、并设置滚动条样式
1.overflow设置滚动条 /* 设置y轴滚动条 */ overflow-y:auto /* 设置x轴滚动条 */ overflow-x:auto 2.设置滚动条样式 ::-webkit-scro ...
- 清除webkit浏览器css设置滚动条
主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...
- 设置滚动条样式vue + div + el-table
修改滚动条样式 展示多个表格,溢出隐藏,显示滚动条,设置滚动条样式,像下面这样: <div class="tableList" id="tableListStyle ...
- 纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
- html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
- css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
最新文章
- 大众高层:中国将成为全球自动驾驶软件研发中心
- 教你如何更优惠的购买阿里云服务器?
- 状态模式在领域驱动设计中的使用
- Java 开发Web Service的几种方式
- vb.net如何查询电脑麦克风收到声音_EMUI 10.1 跨屏协同实测:这一次把你的手机「搬」进电脑...
- 绘图解谜:公钥、私钥、证书
- 【优达学城测评】SQLite 安装(2)
- (8)Zynq AXI_ACP接口介绍
- 用bool函数判断int类型相加溢出_Go是强类型语言,不支持隐式类型转换,那该怎么办?...
- Eclipse — 快速生成提示代码和快速导包
- PHP框架TP5.1
- 《系统集成项目管理》第十六章 变更管理
- python 知乎 sklearn_最全知乎专栏合集:编程、python、爬虫、数据分析、挖掘、ML、NLP、DL......
- 百度、谷歌搜索引擎原理
- 硬件工程师为什么远不如软件工程师?
- ISDA发布亚洲衍生品调查报告
- vue无法加载ps1
- php doctrine datetime,关于php:Doctrine 2.1 – datetime列的默认值
- 微积分 —— 曲率与曲率半径
- 英语、日语学习网站软件
热门文章
- 任杰中山大学计算机技术,喜讯 | 港中大(深圳)学子在2020年“外研社·国才杯”全国英语大赛(广东复赛)创造佳绩...
- 被周鸿祎夸奖的闷骚型产品经理,究竟是如何做产品的?
- 怎样下载excelDIY工具箱怎么办_办公必备的工具箱网站,内含111个实用小工具,完全免费...
- 安卓图书馆借阅占座座位app毕业设计
- 计算机会计模块考试,会计职称计算机考试模块windowsxp考试试题.doc
- 计算机职称考试在线软件,职称计算机考试模拟软件windowXP模块免费版
- 医药企业CRM市场浅谈
- CnOpenData中国专利IPC分类号数据(世界版)
- 深入JVM 对象优先在Eden分配
- 手机短信转发到另一个手机接收_吓人!手机收到“处理尸体”短信 警方调查揭开真相!...