如何更改DataTable滚动条外观？

Question

我试图在FireBug中找到负责 DataTable 滚动条外观的正确CSS类，但我找不到任何合理的css类。表滚动条取决于浏览器 - 在每个浏览器中看起来都不同。那么如何为每个浏览器实现一个滚动条外观呢？

Answer 1

您可以使用WebKit通过CSS实现此目的。实际上，PrimeFaces对CSS中的普通滚动条进行了一些修改。

滚动条webkit是：

::-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 */ }

其中一些是由PrimeFaces实现的，因此有时需要!important。

以下是基于an article的简单示例。

 /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; 
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: rgba(255,0,0,0.8) !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 
 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(255,0,0,0.4) !important; 
 }

结果如下：

可以在github和online Demo上找到一个小工作示例。

希望这有帮助。

Answer 2

这适用于 IE

html { scrollbar-base-color:#8C8CC6; scrollbar-3d-light-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#8C8CC6; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#000000; scrollbar-track-color:#ACACE6; }