如何更改滚动条的样式

Question

我有一个喜欢的CSS代码

  .scrollPanel
    {
        height: 100px;
        width: auto;
        position: absolute;
        overflow: scroll;
    }

你可以看我的例子这里！ 我想知道的是如何改变滚动条的样式？
我怎样才能给它设置CSS样式？

Answer 1

到目前为止，还没有跨浏览器解决方案可以仅使用 CSS 更改滚动条，或者您可以使用 jQuery 来设置它们的样式。

仅适用于 webkit 浏览器的解决方案

演示

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

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

致谢

Answer 2

您也可以使用 IE 的样式元素来完成 Alien 先生的 webkit 解决方案，但目前我只知道颜色。 这是有关它的文档

正如之前所说，没有适用于所有浏览器的仅 CSS 解决方案。

Answer 3

   /* Hide scrollbar buttons */
   ::-webkit-scrollbar-button {
       display: none;
   }

   /* Style the scrollbar */
   ::-webkit-scrollbar {
       width: 5px;
   }

   /* Track styles */
   ::-webkit-scrollbar-track {
       background: #f1f1f1; /* Color of the track */
       border-radius: 10px; /* Rounded corners */
   }

   /* Handle styles */
   ::-webkit-scrollbar-thumb {
       background: #888; /* Color of the handle */
       border-radius: 10px; /* Rounded corners */
   }

       /* Handle hover styles */
       ::-webkit-scrollbar-thumb:hover {
           background: #555; /* Color of the handle on hover */
       }