在html/CSS中自定義滾動條

我用自定義滾動條創建了一個頁面。當我應用代碼時，主體中的所有滾動條和瀏覽器窗口中的滾動條都對代碼作出反應。然而，我想要的只是自定義滾動條而不是窗口的滾動條。在html/CSS中自定義滾動條

我該如何改變這種情況？非常感謝。這是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;  
}

來源

2013-04-25 Richard Freeman

演示：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

來源

2013-04-25 11:53:58

非常感謝回答。其實這解決了我的問題。現在我明白問題來自哪裏。 – 2013-04-26 12:20:39

在html/CSS中自定義滾動條

回答

相關問題