Изменение полосы прокрутки только в списке меню

Question

::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(239,149,36,100); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,30); 
} 

Я нашел этот css онлайн, который изменил стиль полосы прокрутки. Однако он также изменил полосу прокрутки самой страницы, и мне нужно, чтобы она меняла только один из списка меню. Идентификатор списка меню - «cssmenu». Возможно ли и как это сделать?

Answer 1

Просто используйте селектор перед вашими правилами прокрутки

.myscroll { 
 
    height: 1000px; 
 
    overflow: scroll; 
 
} 
 
.myscroll p { 
 
    height: 2000px; 
 
} 
 

 
.myscroll::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 
    
 
/* Track */ 
 
.myscroll::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
} 
 
    
 
/* Handle */ 
 
.myscroll::-webkit-scrollbar-thumb { 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    background: rgba(239,149,36,100); 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30); 
 
} 
 
.myscroll::-webkit-scrollbar-thumb:window-inactive { 
 
\t background: rgba(255,0,0,30); 
 
}

<div class="myscroll"> 
 
    <p>Content<p> 
 
</div>