网页滚动条样式修改 html+css

前提：

::-webkit-scrollbar这个伪类选择器能改（比如网页右侧的）滚动条样式，不过好像挺多浏览器不兼容，我也不是太熟这个属性。

用用：

对应改的部分
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
代码：我改了下样式还有颜色，

 ::-webkit-scrollbar{width: 12px;}::-webkit-scrollbar-thumb{background: linear-gradient(rgb(17, 157, 212),rgb(17, 212, 105));     border-radius: 5px;transition: 1s;}::-webkit-scrollbar-thumb:hover{background: linear-gradient(rgb(17, 212, 105),rgb(17, 157, 212));     }

简单效果：

总结：

学无止境啊~

网页滚动条样式修改 html+css相关推荐

el-table滚动条样式修改
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变. 比如,当我们修改了全局滚动条的样式,使其变得窄一点 // ...
html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
滚动条css圆角兼容ie,ie浏览器滚动条样式修改
用css怎样定义IE滚动条的样式 .testDiv{ border-style:solid; border-width:50px; border-color:pink; position:absolu ...
CSS 滚动条样式修改（详细）
1.滚动条整体部分使用 ::-webkit-scrollbar 示例: .container::-webkit-scrollbar {width: 20px;//修改滚动条宽度 } 2.滚动条中的滑 ...
火狐浏览器滚动条样式修改 css
纯css设置Firefox火狐浏览器的滚动条样式设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个.看名字就知道第一个是设置滚动 ...
css 滚动条样式修改以及动态显示
限定高度并overflow:auto时,溢出滚动时,滚动条出现,对滚动条的样式修改,并只有当鼠标经过时才显示,代码如下 .plan::-webkit-scrollbar {transition: al ...
vue less CSS滚动条样式修改美化变细
滚动条样式 ::-webkit-scrollbar {/*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; }::-webkit-scrollb ...
chrome滚动条样式修改
对于chrome浏览器,它提供了修改滚动条样式的接口,开发者只需要加上几句css脚本,就可轻松实现滚动条样式的修改. 先说一下滚动条的参数: ::-webkit-scrollbar 滚动条整体部分,可 ...
css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...

网页滚动条样式修改 html+css

前提：

用用：

总结：

网页滚动条样式修改 html+css相关推荐

最新文章

热门文章