在Internet Explorer中更改滚动条

时间:2014-11-25 12:34:46

标签: html css css3 internet-explorer scrollbar

我使用以下内容实现了滚动条的所需设计:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 8px;
    background-color: #999;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #666;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

从上面可以看出,这些变化当然不适用于Internet Explorer,我可以暂时执行以下操作:

body {
    -ms-scrollbar-base-color: #999;
    -ms-scrollbar-track-color: #999;
    -ms-scrollbar-face-color: #666;
    -ms-scrollbar-arrow-color: #999;
}

我想知道是否可以在IE中重新创建Chrome中的相同设计。下面是带有滚动条的打印屏幕,首先来自Chrome,第二个来自Internet Explorer。

enter image description here enter image description here

2 个答案:

答案 0 :(得分:2)

不幸的是,没有跨浏览器方式来设置带有CSS的滚动条样式。但您可以尝试下一个JavaScript自定义滚动条插件(主要是jQuery):jQuery ScrollbarjScrollPanemCustomScrollbarperfect-scrollbarslimScrollbaronNiceScroll。有更多自定义滚动条可用,但功能较少/众所周知。

答案 1 :(得分:1)

我使用过这个:http://jscrollpane.kelvinluck.com/这项工作在IE上很容易使用:)享受!