如何创建自定义滚动条？

Question

有没有人让我知道css来创建一个看起来像图像中的自定义滚动条？背景应该是透明的，我现在把它放在绿色背景上。

Answer 1

您可以使用jQuery插件jScrollPane - http://jscrollpane.kelvinluck.com/

执行此操作

$(function() {
   $('.scroll-pane').jScrollPane();
});

上面的代码设置了一个带有“滚动窗格”类的div来滚动。

您无法使用标准CSS，但使用CSS3可以：

pre::-webkit-scrollbar {  
    height: 1.5ex;  
     -webkit-border-radius: 1ex;  
    }  

pre::-webkit-scrollbar-thumb {  
    border-top: 1px solid #fff;  
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));  
       -webkit-border-radius: 1ex;  
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);  
} 

注意：这仅适用于webkit浏览器。