使用CSS和JavaScript操作滚动条颜色

分享于 

2分钟阅读

Web开发

  繁體 雙語

介绍

滚动条默认颜色的原因是它是单调和丑陋的。 通常这种颜色是灰色的。 改变这种颜色以更好地适应你网站的整体主题不是很好? 幸运的是,级联样式表和JavaScript可以用来做这些 !

使用 CSS

在CSS中,你只需将这里代码添加到页面顶部,即可自定义浏览器颜色的滚动条: 最好的是,不理解它的浏览器就是跳过它,在这种情况下,Netscape浏览器。


<style>


<!--


BODY{


scrollbar-face-color:#8080FF;


scrollbar-arrow-color:#FFFFFF;


scrollbar-track-color:#DDDDFF;


scrollbar-shadow-color:'';


scrollbar-highlight-color:'';


scrollbar-3dlight-color:'';


scrollbar-darkshadow-Color:'';


}


-->


</style>



使用不同的值进行播放 !

使用 JavaScript

我可以使用JavaScript动态更改滚动条颜色。 当我想做一些更花哨的事情时,这很有用,比如把滚动条从一种颜色变成另一种颜色。 所需的代码为:


document.body.style.scrollbarFaceColor="colorname"


document.body.style.scrollbarArrowColor="colorname"


document.body.style.scrollbarTrackColor="colorname"


document.body.style.scrollbarShadowColor="colorname"


document.body.style.scrollbarHighlightColor="colorname"


document.body.style.scrollbar3dlightColor="colorname"


document.body.style.scrollbarDarkshadowColor="colorname"



一个非常好的演示是一个由 Svetlin Staev编写的脚本,它在移动鼠标时更改滚动条颜色: http://www.dynamicdrive.com/dynamicindex11/scrolleffect.htm

我看到越来越多的站点自定义滚动条颜色以与它的他站点的它的余部分混合在一起。 希望你能在帮助你做同样的事情上找到 !


JAVA  Javascript  MAN  COL  color  滚动  
相关文章