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

自定义html / CSS中的滚动条

1 个答案: