html设置滚动条样式,css滚动条属性

　　因为现在的项目大部分都用滚动条，有时候还会用到模拟滚动条，所以滚动条的CSS现在也可以解决了。

　　比如网易邮箱的滚动条看起来很好看，是CSS设置的，而且是webkit浏览器的。如图所示：

　　下面是如何使用这些属性以及它们的含义。

一：webkit下面的CSS设置滚动条

　　主要有以下七个属性

　　:-webkit-scrollbar滚动条整体部分，可以设置某个东西的宽度：-webkit-scrollbar-button滚动条两端的按钮：-webkit-scrollbar-track外轨：-webkit-scrollbar-track-piece内滚槽：-WebKit-scroll bar-thumb slider:-we Bkit-scroll bar-Corner:-WebKit-resizer定义右下角拖动块的样式如图所示：

　　以上是滚动条的主要设置属性，还有更详细的CSS属性。

　　:水平方向的水平滚动条

　　:垂直方向的垂直滚动条

　　:减量适用于按钮和跟踪件。它用于指示按钮或内部轨道是否会缩小窗口的位置(例如，垂直滚动条的顶部和水平滚动条的左侧)。)

　　:incrementdecrement类似。它用于指示按钮或内部轨道是否会增加窗口的位置(例如，垂直滚动条的下方和水平滚动条的右侧)。)

　　:start伪类也应用于按钮和滑块。它用于定义对象是否放在滑块的前面。

　　:end类似于start伪类，标识对象是否放在滑块后面。

　　:double-button这个伪类用于按钮和内部轨道。用于确定一个按钮是否是位于滚动条同一端的一对按钮中的一个。对于内轨，表示内轨是否靠近一对按钮。

　　:单按钮类似于双按钮伪类。对于按钮，它用于确定在滚动条的一部分中按钮是否独立于自身。对于内部轨道，它指示内部轨道是否接近单按钮。

　　:no-按钮用于内部轨道，指示内部轨道是否应该滚动到滚动条的末尾。例如，当滚动条的两端都没有按钮时。

　　:corner-present用于所有滚动条轨道，指示是否显示滚动条拐角。

　　:window-inactive用于所有滚动条轨道，指示滚动条所应用到的页面容器(元素)当前是否被激活。(在最新版本的webkit中，这个伪类也可以用于：selection伪元素。Webkit团队已经计划扩展它并推动它成为一个标准的伪类)

　　CSS也很简单，比如：

　　/*设置滚动条的样式*/:-WebKit-scroll bar { width:12px；}/* scroll slot */:-WebKit-scroll bar-track {-WebKit-box-shadow:inset 06 pxr GBA(0，0，0，0.3)；边框半径：10px}/*滚动条滑块*/:-WebKit-Scroll bar-thumb { border-radius:10px；背景：rgba(0，0，0，0.1)；-WebKit-box-shadow:inset 006 pxrgba(0，0，0，0.5)；}:-WebKit-scroll bar-thumb:window-inactive { background:rgba(255，0，0，0.4)；}

二：IE下面的CSS设置滚动条

　　 IE以下比较简单。自定义项目比较少，都是颜色。

　　滚动条-箭头-颜色：颜色；/*三角形箭头的颜色*/scroll bar-face-color:color；/*立体滚动条的颜色(包括箭头部分的背景颜色)*/scroll bar-3d light-color:color；/*立体滚动条亮边的颜色*/scroll bar-highlight-Color:Color；/*滚动条高亮颜色(左阴影？)*/scrollbar-shadow-color:颜色；/*立体滚动条阴影的颜色*/scroll bar-dark shadow-Color:Color；/*立体滚动条外阴影的颜色*/scroll bar-track-Color:Color；/*立体滚动条背景色*/scroll bar-base-color:color；/*滚动条的基本颜色*/就是这样。这篇关于用CSS设置滚动条样式的文章在这里。希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。