Как оформить полосу прокрутки на странице без изменения полосы прокрутки в браузере?

Question

У меня есть прокручиваемый div, который использует overflow: scroll.

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

Примечание : пожалуйста, проверьте в Chrome, поскольку это то, что я тестировал до сих пор, стили полосы прокрутки не работаютв Firefox.

Codepen: https://codepen.io/anon/pen/ZMdBQQ

CSS :

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

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 1

.scroll Будет необходимо добавить в первую очередь.Или это будет зарегистрировано как это

:root::-webkit-scrollbar {
    width: 16px;
}

:root::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

:root::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

:root::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}
/*Nothing to do with this*/
:root {
font-size: 200px
}

<p>Hi! This will not register once as a scrollbar.<br><br>It's going to register as:
:root::-webkit-scrollbar {
    width: 16px;
}

:root::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

:root::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

:root::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}
</p>

Чтобы сделать это для .scroll class, нам нужно будет сделать следующее:

/*nothing to do with this*/
.scroll {
height: 80px;
font-size: 100px;
background: red;
overflow: auto;
}

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

<div class="scroll">
Hi,
<br>
This will register for 
<br >
a styled scrollbar in HTML, and CSS.
<br />
With the class scroll(.scroll)
</div>

Стили CSS-прокрутки - CSS-хитрости

CodePen: https://codepen.io/CatMan10/pen/yQjqaM

Answer 2

Добавьте класс .scroll перед кодом -webkit

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 3

Это может быть довольно сложно, потому что это зависит от браузера.Обычно люди рисуют свою собственную «полосу прокрутки» с элементами div (используя JS, чтобы описать ее поведение), и настоящую полосу прокрутки, которую они скрывают, добавляя ~22px к ширине блока и добавляя свойство CSS overflow: scroll-y.

ОБНОВЛЕНИЕ: Я нашел для вас простых скриптов .

Answer 4

Просто ограничьте его элементом .scroll, например:

.scroll::-webkit-scrollbar {
    width: 16px;
}

https://codepen.io/anon/pen/yxdgmq