1

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

我怎样才能改变这个？非常感谢。这是 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;    
}
4

1 回答 1

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)。

更多阅读：伪元素选择器

于 2013-04-25T11:53:58.983 回答