Настройка полос прокрутки в html/CSS

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

Demo: 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