Возможно ли стилизовать ScrollBar у определённого элемента? К примеру я открываю на сайте модальное окно и чтобы в нём скролл отличался от того, который прокручивает саму страницу.
Возможно ли стилизовать 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>
Можно менять стили с помощью ::-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)));
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть скрипт для блоков div: при наведении на блок1 в соседнем блоке2 отображается скрытый блок, аналогично при наведении блок2 в первом блоке1...