CSS 滚动条样式修改（详细）

1、滚动条整体部分

使用 ::-webkit-scrollbar

示例：

.container::-webkit-scrollbar {width: 20px;//修改滚动条宽度
}

2、滚动条中的滑块

使用 ::-webkit-scrollbar-thumb

示例：

.container::-webkit-scrollbar-thumb {border-radius: 8px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #666666;
}
//鼠标移入样式
.container::-webkit-scrollbar-thumb:hover {background: #333333;
}

3、滚动条中的外层轨道

使用 ::-webkit-scrollbar-track

示例：

.container::-webkit-scrollbar-track {border-radius: 8px;background: #eeeeee;
}

4、滚动条中的两端箭头按钮

使用 ::-webkit-scrollbar-button

示例：

.container::-webkit-scrollbar-button {background: #eeeeee;
}

5、水平方向和垂直方向滚动条交接处

使用 ::-webkit-scrollbar-corner

示例：

.container::-webkit-scrollbar-corner {background-color: transparent;
}

6、单独设置水平方向或垂直方向滚动条样式

水平方向上的滚动条：:horizontal
垂直方向上的滚动条：:vertical

示例：

//水平方向滚动条
.container::-webkit-scrollbar:horizontal {width: 10px;
}
//垂直方向滚动条
.container::-webkit-scrollbar:vertical {width: 20px;
}

CSS 滚动条样式修改（详细）相关推荐

css 滚动条样式修改以及动态显示
限定高度并overflow:auto时,溢出滚动时,滚动条出现,对滚动条的样式修改,并只有当鼠标经过时才显示,代码如下 .plan::-webkit-scrollbar {transition: al ...
vue less CSS滚动条样式修改美化变细
滚动条样式 ::-webkit-scrollbar {/*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; }::-webkit-scrollb ...
css 滚动条样式修改
1.记录一下,百度超过2次了 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:10px;height:10px;background-co ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
css滚动条样式重写（兼容ie和谷歌）
博主在工作中遇到修改滚动条样式的情况,效果如下: 1.重写滚动条样式,兼容IE,谷歌. 2.鼠标移入元素显示滚动条,鼠标移出隐藏滚动条. 注意: 1.互不干扰:首先说明的是谷歌的css滚动条样式的写法 ...
CSS滚动条样式设置
CSS滚动条样式设置 1.概述 2.滚动条css 3.总结 1.概述最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需 ...
CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome.Firefox.IE5.5+三大浏览器的改写方法. Chrome: 原理:通过-webkit相关属性直接可以灵活控制滚动条 ...
html中美化右侧滑动条,美化css滚动条样式，就这么简单
很多朋友,会觉得默认的css滚动条样式是很丑的吧,稍微改下-webkit-scrollbar(滚动条整体样式).-webkit-scrollbar-thumb(滚动条里面小方块样式).-webkit- ...
el-table滚动条样式修改
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变. 比如,当我们修改了全局滚动条的样式,使其变得窄一点 // ...