在html/CSS中自定义滚动条

Question

我用自定义滚动条创建了一个页面。当我应用代码时，主体中的所有滚动条和浏览器窗口中的滚动条都对代码作出反应。然而，我想要的只是自定义滚动条而不是窗口的滚动条。

我该如何改变这种情况？非常感谢。这是webkit代码。

::-webkit-scrollbar .right {  
    width: 7px;   
}  

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

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

::-webkit-scrollbar-thumb:hover {  
    background-color:#028eff;  
}  

Answer 1

演示：http://jsfiddle.net/2cpSW/2/（仅适用于WebKit的）

可以使用更严格的选择：

/* just for testing */ 
div.custom-scroll { 
    overflow: auto; 
    height: 200px; 
} 

/* modified selectors from question */ 

.custom-scroll::-webkit-scrollbar { 
    width: 7px; 
} 
.custom-scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
.custom-scroll::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 
} 
.custom-scroll::-webkit-scrollbar-thumb:hover { 
    background-color:#028eff; 
} 

它看起来像你试图用（::-webkit-scrollbar .right）来做到这一点。也许所有你需要做的是正确的选择？ （.right::-webkit-scrollbar）。

更多阅读：Pseudo Element Selectors