CSS设置滚动条样式（兼容IE）_ie11兼容滚动条_杨四郎2018的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

webkit内核的浏览器滚动条定制

在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······

下面我们来看一下webkit浏览器是如何强大的吧！

CSS
::- webkit - scrollbar { /* 1 */ }
::- webkit - scrollbar - button { /* 2 */ }
::- webkit - scrollbar - track { /* 3 */ }
::- webkit - scrollbar - track - piece { /* 4 */ }
::- webkit - scrollbar - thumb { /* 5 */ }
::- webkit - scrollbar - corner { /* 6 */ }
::- webkit - resizer { /* 7 */ }

以上CSS代码所管辖的区域对就关系：以上注释中的数字与下图中数字相对应。 webkit浏览器滚动条样式设置位置参考如下：

上图正如如下所言：

::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

能过上面的不断的测试。在Chrome中，滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性，你就像控制一般块级元素一样简单。

下面是代码：

< div id = 'scroll' >
< div >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error. </ p >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet. </ p >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem! </ p >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus! </ p >
< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt! </ p >
</ div >
</ div >

#scroll {
width : 200px ;
height : 200px ;
overflow : auto ;
margin-bottom : 20px ;
}
#scroll div{
width : 400px ;
height : 400px ;
}
#scroll ::-webkit-scrollbar{ /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
width : 10px ;
height : 10px ;
}
#scroll ::-webkit-scrollbar-button{ /*滚动条两端的按钮，可以用让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
background : #74D334 ;
}
#scroll ::-webkit-scrollbar-track{ /*外层轨道，可以用让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
background : #FF66D5 ;
}
#scroll ::-webkit-scrollbar-track-piece{ /*内层轨道，滚动条中间部分（位置4）*/
background : #FF66D5 ;
}
#scroll ::-webkit-scrollbar-thumb{ /*滚动条里面可以拖动的那部分（位置5）*/
background : #FFA711 ;
border-radius: 4px ;
}
#scroll ::-webkit-scrollbar-corner { /*边角（位置6）*/
background : #82AFFF ;
}
#scroll ::-webkit-scrollbar-resizer { /*定义右下角拖动块的样式（位置7）*/
background : #FF0BEE ;
}
#scroll {
scrollbar-arrow- color : #f4ae21 ; /**/ /*三角箭头的颜色*/
scrollbar-face- color : #333 ; /**/ /*立体滚动条的颜色*/
scrollbar -3 dlight- color : #666 ; /**/ /*立体滚动条亮边的颜色*/
scrollbar-highlight- color : #666 ; /**/ /*滚动条空白部分的颜色*/
scrollbar-shadow- color : #999 ; /**/ /*立体滚动条阴影的颜色*/
scrollbar-darkshadow- color : #666 ; /**/ /*立体滚动条强阴影的颜色*/
scrollbar-track- color : #666 ; /**/ /*立体滚动条背景颜色*/
scrollbar-base- color : #f8f8f8 ; /**/ /*滚动条的基本颜色*/
}

简约版 (IE样式直接默认就行)

#scroll -2 {
width : 200px ;
height : 200px ;
overflow : auto ;
margin-bottom : 20px ;
}
#scroll -2 div{
width : 400px ;
height : 400px ;
}
#scroll -2: :-webkit-scrollbar{
width : 4px ;
height : 4px ;
}
#scroll -2: :-webkit-scrollbar-track{
background : #f6f6f6 ;
border-radius: 2px ;
}
#scroll -2: :-webkit-scrollbar-thumb{
background : #aaa ;
border-radius: 2px ;
}
#scroll -2: :-webkit-scrollbar-thumb:hover{
background : #747474 ;
}
#scroll -2: :-webkit-scrollbar-corner{
background : #f6f6f6 ;
}

项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。多浏览器没有做太多测试，在 ie 6中已测试通过。功能期待了很久今天终于找到解决的方式，总结到javaeye中方便日后查阅。实现方式可能还有更好的，希望有大牛路过，给我留点更好的实现例子作日后交流之用。以下是相关的 css 复制代码代码如下: <style type=”text/ css ”> <!– body,table, td, a {font:9pt;} /*重点：固定行头样式 */ .scroll ie 滚动条样式 ie 滚动条宽度 IE 下设置滚动条宽高的方法找不到。 IE 下的滚动条样式修改跟chrome下的不一样，而且只能修改颜色。美化div 滚动条并兼容 IE 8 ie 11 滚动条宽度... 写法：写在overflow同级的位置，由于在 IE 下transparent无效，故将滚动条置为页面背景色，以此规避丑丑的滚动条样式。这几个属性文档说是兼容 IE 5.5，亲测 IE 11可以，低版本未测试。用以下几个属性组合，就可以将滚动条变得和背景色一样： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color 经常写页面的同学都知道，浏览器一般自带的滚动条样式很丑，和页面风格格格不入，于是就想着是否能够改变原有滚动条样式？但实际中，其他浏览器又和 IE 浏览器不一样，导致兼容性不好。 chrome浏览器滚动条自定义样式修改： /* 滚动条滑块按钮的颜色*/ scrollbar-face-color: #134187; /* 滚动条整体颜色*/ scrollbar-highlight-c... css 滚动条样式，windows系统下，滚动条比较丑，以下分别是chrome、Firefox、 IE 5.5+三大浏览器的改写方法。 Chrome：原理：通过-webkit相关属性直接可以灵活控制滚动条样式。 ::-webkit-scrollbar { /* 滚动条宽 */ width: 6px; height: 4px; ::-webkit-scrollbar-thumb { /* 滚... 废话不多说，直接上demo，最下面有详细注释。1、这是在webkit浏览器下显示的样式。 (个人比较喜欢简约点的)2、在 IE 浏览器下显示的样式 (为了区分所以样式写的不一样，我没找到 IE 下设置滚动条宽高的方法)下面是代码：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab ali...