人工智能 网站建设,wordpress主题 博客,手机兼职一单一结0元投资,wordpress主页访客记录由于种种原因#xff0c;浏览器的默认滚动条“衣裳”实在是 (ˉ▽#xffe3;#xff5e;)~~#xff0c;为了“美”#xff0c;本人结合万维网各大神给的经验和自己的实践#xff0c;做了此篇总结。若有错误#xff0c;请在评论里给出#xff0c;我会及时更改。
我在电…由于种种原因浏览器的默认滚动条“衣裳”实在是 (ˉ▽)~~为了“美”本人结合万维网各大神给的经验和自己的实践做了此篇总结。若有错误请在评论里给出我会及时更改。
我在电脑上打开了一些浏览器先观察一下其中IE浏览器版本10-5在我电脑上显示是一致的火狐版本为 59.0.2。如下图1可见除了火狐浏览器和Opera浏览器的样式与其他浏览器样式差别较大其余样式差别不大主要是颜色的不同。
不知道为什么我放不上图片╭(╯^╰)╮ ε唉
一专属IE的“衣裳”
网上找到一个不错的分享我自己在总结下内容原网址
滚动条样式支持情况支持浏览器版本可否继承描述scrollbar-3dlight-colorIE特有属性IE5.5 y设置滚动框的和滚动条箭头左上边缘的颜色scrollbar-highlight-colorIE特有属性IE5.5 y设置滚动框的和滚动条箭头左上边缘的颜色scrollbar-face-colorIE特有属性IE5.5 y设置滚动框和滚动条箭头的颜色scrollbar-arrow-colorIE特有属性IE5.5 y设置滚动条箭头的颜色scrollbar-shadow-colorIE特有属性IE5.5 y设置滚动框的和滚动条箭头右下边缘的颜色scrollbar-dark-shadow-colorIE特有属性IE5.5 y设置滚动条槽的颜色scrollbar-base-colorIE特有属性IE5.5 y设置滚动条主要构成部分的颜色scrollbar-track-colorIE特有属性IE5.5 y设置滚动条轨迹组成部分的颜色 由于放不了图各位还是自己直观试试吧一下是我的总结 1、关于scrollbar-dark-shadow-color属性我是在win7系统下测试Edge、IE10、9、8、7、5都没有显示什么包括和其他属性组合也没效果 2、这几个元素的从属关系 scrollbar-face-color || scrollbar-arrow-color || scrollbar-shadow-color scrollbar-track-color scrollbar-highlight-color scrollbar-base-color scrollbar-3dlight-color 3、scrollbar-3dlight-color不论设置什么颜色滚动条轨迹组成部分的颜色变为white色,滚动框和滚动条箭头的颜色变浅灰色 ; 4、scroll-base-color是一个备用颜色 ,在其他属性不设置任何颜色时滚动条颜色为此色滚动框黑色滚动轨迹为此色的浅色系上下箭头变深接近黑色; 5、在只设置scrollbar-track-color或者只设置scrollbar-face-color时上下两个箭头的颜色会变得比默认颜色深; 6、在只设置scrollbar-face-color时候滚动条轨迹组成部分的颜色变为white色; 7、在只设置scrollbar-arrow-color时候滚动条轨迹组成部分的颜色变为white色,滚动框和滚动条箭头的颜色变浅灰色; 8、滚动条宽度无法设置不能设置出弧度等形状 。
二webkit内核的“衣裳” 拥有webkit内核的浏览器差不多都支持下面的css属性下边的伪元素最好放在css文件顶部方便找。 ::-
webkit
-
scrollbar
{ } /* 滚动条整体部分其中的属性有width,height,background,border就和一个块级元素一样等 */ ::-
webkit
-
scrollbar
-
button
{ } /* 滚动条两端的按钮。可以用display:none让其不显示也可以添加背景图片颜色改变显示效果 */ ::-
webkit
-
scrollbar
-
track
{ } /* 外层轨道。可以用display:none让其不显示也可以添加背景图片颜色改变显示效果 */ ::-
webkit
-
scrollbar
-
track
-
piece
{ } /* 内层轨道滚动条中间部分除去*/ ::-
webkit
-
scrollbar
-
thumb
{ } /* 滚动条里面可以拖动的那部分 */ ::-
webkit
-
scrollbar
-
corner
{ } /* 边角 */ ::-
webkit
-
resizer
{ } /* 定义右下角拖动块的样 */
eg:
html
div classmain div classbox div classbox-ctnHello 。。。/div /div /div css:
::-webkit-scrollbar { width: 10px; height: 10px; background: #f2f2f2; border: yellowgreen 1px solid; } ::-webkit-scrollbar-button { background-color:#267326; } ::-webkit-scrollbar-track { background:#9fdf9f; } ::-webkit-scrollbar-track-piece { background:url(http://pic.58pic.com/58pic/16/41/00/49F58PICmZg_1024.jpg); } ::-webkit-scrollbar-thumb { background:#339933; border-radius: 5px; } ::-webkit-scrollbar-corner { background:#ff0000; } ::-webkit-resizer { background:#ff0000; } ::-webkit-scrollbar-button:horizontal { background-color:#00a3cc; } ::-webkit-scrollbar-track:horizontal { background:#b3f0ff; } ::-webkit-scrollbar-thumb:vertical { background:#1ad1ff; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #267326; } ::-webkit-scrollbar-thumb:active { background: #267326; } ::-webkit-scrollbar-thumb:vertical:hover { background: #00a3cc; } ::-webkit-scrollbar-thumb:vertical:active { background: #00a3cc; } ::-webkit-scrollbar-button:decrement { border: 1px solid #00a3cc; } ::-webkit-scrollbar-button:increment { border: 1px solid #267326; } /* ::-webkit-scrollbar-track:corner-present { display: none } */ /* ::-webkit-scrollbar-button:start { background-color: blue; } ::-webkit-scrollbar-button:end { background-color: green; } */ .main { padding: 20px; border: blue 1px dashed; } .box { width: 500px; height: 200px; overflow: scroll; } .box-ctn { width: 3000px; height: 1000px; } 这些伪元素还可以搭配很多伪类英文链接, 汉文翻译
:horizontal 主要应用于选择水平方向滚动条可以单独设置水平方向的样式
:vertical 主要是应用于选择竖直方向滚动条可以单独设置垂直方向的样式 :decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如垂直滚动条的上面水平滚动条的左边。)
:increment 用来指示按钮或内层轨道是否会增大视窗的位置(比如垂直滚动条的下面和水平滚动条的右边。)
:
start 应用于按钮和滑块。它用来定义对象是否放到滑块的前面。 :end 标识对象是否放到滑块的后面。
:double-button 该伪类可以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说它表示内层轨道是否紧靠一对按钮。
:single-button 类似于double-button伪类。对按钮来说它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说它表示内层轨道是否紧靠一个single-button。
:no-button 用于内层轨道表示内层轨道是否要滚动到滚动条的终端比如滚动条两端没有按钮的时候。
:corner-present 用于所有滚动条轨道指示滚动条圆角是否显示。
:window-inactive 用于所有的滚动条轨道指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
:hover 鼠标悬浮时的效果
:active 被激活时的样式
:enabled 元素的可用状态
:disabled 元素的禁用状态
根据伪类可以增加滚动条的样式以及一些动画我最常用的是 :hover、 :active 、:window-inactive根据需求大家可以多多尝试。
三Firefox的“衣裳”
这件可真是换不下来了
网上给了一些参考但我试了试没弄明白下面是连接有兴趣的看完会的若不麻烦留言给个例子吧
https://bbs.kafan.cn/thread-1529981-1-1.html
参考文件 小天地大世界[https://www.lyblog.net] https://www.lyblog.net/detail/314.html https://webkit.org/blog/363/styling-scrollbars/
