Изменить scroll CSS

Последнее обновление на 29.01.2023

Изменить scroll CSS (а также пример как отключить scroll css)

Код CSS

.scroll {
  overflow-y: scroll;
  width: 200px;
  height: 400px;
  background-color: orange;
}

.flow {
  min-height: 600px;
}

.scroll::-webkit-scrollbar {
    width: 16px; /* ширина скролла*/
    background-color: gray; /* фон скрола */
}

.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(228, 189, 115, 1.00);  /* фон ползунка скрола */
    -webkit-box-shadow: 7px 7px 7px -7px rgba(35, 62, 70, 0.2) inset; /* наложение тени на скрол */ 
    border-radius: 2px;
}

.scroll::-webkit-scrollbar-button:vertical:start:decrement {
    background-color: black; /* верхняя часть скрола*/
}
.scroll::-webkit-scrollbar-button:vertical:end:increment {
     background-color: black; /* нижняя часть скрола*/
}

/* скрыть скролл бар */
/* firefox */
/*
.scroll {
    scrollbar-width: none; 
}
*/
/* webkit */
/*
.scroll::-webkit-scrollbar { 
    width: 0;
    height: 0;
}
*/

Код html

<div class="scroll">
<div class="flow">Смотрим, что получилось</div>
</div>

Демонстрация работы стиля CSS — scroll