- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
scroll样式剖析
HYPERLINK /detail/314.html 自定义浏览器滚动条的样式,打造属于你的滚动条风格
? HYPERLINK /category/divcss.html Div+Css、 HYPERLINK /category/jquery.html jQuery?? HYPERLINK javascript:void(0) 暂无标签?Jul 19, 2013?? HYPERLINK / \l respond 0 条评论??围观 0 次?
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性。便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正;若有更好的方案,你可以留言,让大家都开开眼界。。。。。。
自定义IE浏览器滚动条样式
追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性况:
滚动条样式支持情况支持浏览器版本可否继承描述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设置滚动条轨迹组成部分的颜色为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片???
经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用。估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况:
以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了。但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用)。具体如下:
关于scrollbar-track-color,scrollbar-face-color与scrollbar-base-color。直接看英语单词,你就也许能明白scroll-base-color是一个备用颜色,只要前两者未设置时,它就开始起作用了。但是你得注意,当scrollbar-base-color用来作scrollbar-track-color功能来用时,你会发现,实际颜色与设定的颜色要淡一点。不信你可以这样试试:只设置一下scrollbar-base-color看看滚动条的效果。
关于scrollbar-dark-shadow-color属性,通过测试发现Win 8下IE10,IE11滚动条并没有改变。可能是win 8的滚动条重新定义了,导致没有了隐影了吧!(仅个人猜想)
通过观察我们发现,Win 8下的滚动条中,上箭头和下箭头后面的背景颜色都已经从scroll-face-color中脱离出来了,从属于scroll-track-color属性控制。
感觉IE浏览器滚动条自定制功能并不是很强,只能控制一样显示各个部分的颜色而已,像宽度,结构等都无法控制,要靠出个性点的滚动条,很难!很难!!!
自定义FireFox浏览器滚动条
在网上找了很多关于Firfox自定义浏览器滚动条的方法,发现firefox中却实是不支持的。发现了几篇说可以更改,自已也跟着代码写了几次(不知是我错了还是。。。),发现却是不起作用。以下是一点小的收获:
复制
@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滚动条颜色 */
scrollbar {
-moz-appea
您可能关注的文档
- SAP-后台配置-FICO,PP,MM,SD剖析.docx
- SAP_FICO_知识剖析.doc
- SAP2000使用教程剖析.docx
- Safety系统手持终端操作手册剖析.doc
- SAP_R3九大模块功能详解剖析.doc
- 1.2.1 数轴精选.ppt
- SAP-全面预算管理解决BPC剖析.pptx
- SAP模块常用事务代码剖析.doc
- SAP物料移动类型和OBYC配置简明版剖析.doc
- SAP移动类型与科目关联相关配置剖析.doc
- 2024年05月黑龙江双鸭山饶河县事业单位面向社会公开引进高学历人才10人笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 2024年05月黑龙江鸡西市营商环境建设监督局招考聘用笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 2024年06月安徽马鞍山含山县选任人民陪审员120人笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 2024年2月上海交通大学医学院附属上海儿童医学中心招考聘用100人笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 2024年06月春季奥体中心公开招聘笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 2024年06月中国农业电影电视中心公开招聘应届毕业生拟录用人选笔试上岸历年高频考点(难、易错点)附带答案详解.docx
- 公路工程监理工程师经济系列(公路工程经济)模拟练习试卷16.pdf
- 公路工程监理工程师经济系列(公路工程经济)模拟练习试卷8.pdf
- 设备工程进度管理方法练习试卷1.pdf
- 环境影响评价师(环境影响评价技术方法)模拟试卷74.pdf
文档评论(0)