html/CSS의 스크롤 막대 사용자 정의

Question

사용자 정의 스크롤 막대가있는 페이지를 만들었습니다. 코드를 적용하면 본문의 모든 스크롤 막대와 브라우저 창의 스크롤 막대가 코드에 반응했습니다. 그러나 내가 원했던 것은 창문이 아닌 몸체의 스크롤 막대 만 사용자 화하는 것입니다.

어떻게 변경할 수 있습니까? 많은 감사합니다. 다음은 웹킷 코드입니다.

::-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-scrollbar .right)이 작업을 수행하려고했던 것처럼

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

것 같습니다. 아마 당신이해야 할 일은 셀렉터를 수정하는 것뿐입니다? (.right::-webkit-scrollbar).

자세히 읽기 : Pseudo Element Selectors