Стилизация конкретного ScrollBar

53
16 марта 2022, 15:40

Возможно ли стилизовать ScrollBar у определённого элемента? К примеру я открываю на сайте модальное окно и чтобы в нём скролл отличался от того, который прокручивает саму страницу.

Answer 1

Возможно ли стилизовать ScrollBar у определённого элемента?

да, возможно.

однако

стоит учитывать особенности КАДОГО браузера КАЖДОЙ версии.
там обсуждают лиса:
https://stackoverflow.com/q/6165472/4794368

код ниже, проверялся в FF последней версии.
взят оттуда

#qql { 
    height: 200px; 
    width: 50px; 
    overflow: auto; 
    scrollbar-color: rebeccapurple green; 
    scrollbar-width: thin; 
} 
 
body { 
  /*overflow: hidden;*/ 
}
<div id="qql"> 
q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br> 
</div>

Answer 2

Можно менять стили с помощью ::-webkit-scrollbar

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

HTML

 <div class="container" id="custom-scrolbar">
      <div class="content"></div>
    </div>

CSS

.container{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}
.content{
    min-height: 450px;
}
#custom-scrolbar::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}
#custom-scrolbar::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}
#custom-scrolbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}
READ ALSO
Как перекрыть одно событие другим

Как перекрыть одно событие другим

Есть скрипт для блоков div: при наведении на блок1 в соседнем блоке2 отображается скрытый блок, аналогично при наведении блок2 в первом блоке1...

64
Утечка памяти при использовании Vuex

Утечка памяти при использовании Vuex

Пишу MMO RTSНа фронте использую Vue

67