html - 在 html/CSS 中自定义滚动条

Question

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

我怎样才能改变这个？非常感谢。这是 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/ (仅限网络工具包)

您可以使用限制性更强的选择器:

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