您的位置: 首页  >  文章  >  CSS设置滚动条样式（兼容IE）

CSS设置滚动条样式（兼容IE）

分类: 文章 • 2023-03-19 15:55:20

1、这是在webkit浏览器下显示的样式。

CSS设置滚动条样式（兼容IE）           CSS设置滚动条样式（兼容IE）（个人比较喜欢简约点的）

2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法）

CSS设置滚动条样式（兼容IE）


自定义IE浏览器滚动条样式

追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况：

IE浏览器滚动条样式设置位置参考如下图

CSS设置滚动条样式（兼容IE）

为了有助于理解IE中滚动条样式的控制，你可以查看如下的图片：

CSS设置滚动条样式（兼容IE）

以上所写的几个四个CSS属性，足以控制Win 8系统下，IE浏览器的滚动条样式了。但经过测试，发现，其它的四个属性仍然支持（主要是在以上几个属性空缺时，就会体现其作用）。具体如下：

  1. 关于scrollbar-track-color，scrollbar-face-color与scrollbar-base-color。直接看英语单词，你就也许能明白scroll-base-color是一个备用颜色，只要前两者未设置时，它就开始起作用了。但是你得注意，当scrollbar-base-color用来作scrollbar-track-color功能来用时，你会发现，实际颜色与设定的颜色要淡一点。不信你可以这样试试：只设置一下scrollbar-base-color看看滚动条的效果。
  2. 关于scrollbar-dark-shadow-color属性，通过测试发现Win 8下IE10，IE11滚动条并没有改变。可能是win 8的滚动条重新定义了，导致没有了隐影了吧！（仅个人猜想）
  3. 通过观察我们发现，Win 8下的滚动条中，上箭头和下箭头后面的背景颜色都已经从scroll-face-color中脱离出来了，从属于scroll-track-color属性控制。

感觉IE浏览器滚动条自定制功能并不是很强，只能控制一样显示各个部分的颜色而已，像宽度，结构等都无法控制。

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

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

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

复制 


    

  1.  CSS
    2. 

  2. 
 ::-webkit-scrollbar { /* 1 */ }

    3. 

  3. 
 ::-webkit-scrollbar-button { /* 2 */ }

    4. 

  4. 
 ::-webkit-scrollbar-track { /* 3 */ }

    5. 

  5. 
 ::-webkit-scrollbar-track-piece { /* 4 */ }

    6. 

  6. 
 ::-webkit-scrollbar-thumb { /* 5 */ }

    7. 

  7. 
 ::-webkit-scrollbar-corner { /* 6 */ }

    8. 

  8. 
 ::-webkit-resizer { /* 7 */ }

    9. 




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





CSS设置滚动条样式（兼容IE）






上图正如如下所言：


    

  • ::-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                       定义右下角拖动块的样式
    • 




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



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



CSS设置滚动条样式（兼容IE）







下面是代码：











[html] view
plain copy










    

  1. 
<div id='scroll'>  

    2. 

  2. 
    <div >  

    3. 

  3. 
            <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>  

    4. 

  4. 
            <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>  

    5. 

  5. 
            <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>  

    6. 

  6. 
            <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>  

    7. 

  7. 
            <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>  

    8. 

  8. 
        </div>  

    9. 

  9. 
</div>  

    10. 


















[css] view
plain copy










    

  1. 
#scroll{  

    2. 

  2. 
        width:200px;  

    3. 

  3. 
        height:200px;  

    4. 

  4. 
        overflow:auto;  

    5. 

  5. 
        margin-bottom: 20px;  

    6. 

  6. 
    }  

    7. 

  7. 
    #scroll div{  

    8. 

  8. 
            width:400px;  

    9. 

  9. 
            height:400px;  

    10. 

  10. 
    }  

    11. 

  11. 
    #scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/  

    12. 

  12. 
            width:10px;  

    13. 

  13. 
            height:10px;  

    14. 

  14. 
    }  

    15. 

  15. 
    #scroll::-webkit-scrollbar-button{/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/  

    16. 

  16. 
            background:#74D334;  

    17. 

  17. 
    }  

    18. 

  18. 
    #scroll::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/  

    19. 

  19. 
            background:#FF66D5;  

    20. 

  20. 
    }  

    21. 

  21. 
    #scroll::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/  

    22. 

  22. 
            background:#FF66D5;  

    23. 

  23. 
    }  

    24. 

  24. 
    #scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/  

    25. 

  25. 
        background:#FFA711;  

    26. 

  26. 
        border-radius:4px;  

    27. 

  27. 
    }  

    28. 

  28. 
    #scroll::-webkit-scrollbar-corner {/*边角（位置6）*/  

    29. 

  29. 
        background:#82AFFF;   

    30. 

  30. 
    }  

    31. 

  31. 
    #scroll::-webkit-scrollbar-resizer  {/*定义右下角拖动块的样式（位置7）*/  

    32. 

  32. 
        background:#FF0BEE;  

    33. 

  33. 
    }  

    34. 

  34. 
    #scroll{  

    35. 

  35. 
        scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   

    36. 

  36. 
        scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   

    37. 

  37. 
        scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   

    38. 

  38. 
        scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   

    39. 

  39. 
        scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   

    40. 

  40. 
        scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   

    41. 

  41. 
        scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   

    42. 

  42. 
        scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/   

    43. 

  43. 
    }  

    44. 










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











[css] view
plain copy










    

  1. 
#scroll-2{  

    2. 

  2. 
        width:200px;  

    3. 

  3. 
        height:200px;  

    4. 

  4. 
        overflow:auto;  

    5. 

  5. 
    margin-bottom: 20px;  

    6. 

  6. 
}  

    7. 

  7. 
#scroll-2 div{  

    8. 

  8. 
    width:400px;  

    9. 

  9. 
    height:400px;  

    10. 

  10. 
}  

    11. 

  11. 
#scroll-2::-webkit-scrollbar{  

    12. 

  12. 
    width:4px;  

    13. 

  13. 
    height:4px;  

    14. 

  14. 
}  

    15. 

  15. 
#scroll-2::-webkit-scrollbar-track{  

    16. 

  16. 
    background: #f6f6f6;  

    17. 

  17. 
    border-radius:2px;  

    18. 

  18. 
}  

    19. 

  19. 
#scroll-2::-webkit-scrollbar-thumb{  

    20. 

  20. 
    background: #aaa;  

    21. 

  21. 
    border-radius:2px;  

    22. 

  22. 
}  

    23. 

  23. 
#scroll-2::-webkit-scrollbar-thumb:hover{  

    24. 

  24. 
    background: #747474;  

    25. 

  25. 
}  

    26. 

  26. 
#scroll-2::-webkit-scrollbar-corner{  

    27. 

  27. 
    background: #f6f6f6;  

    28. 

  28. 
}  

    29. 










															

																					

								

									相关推荐