Стиль прокрутки CSS3 на div

Как я могу стирать полосы прокрутки webkit с помощью CSS3?

Я имею в виду эти свойства

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

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Вот мой тег div

<div class="scroll"></div>

Вот мой текущий CSS

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}

Ответ 1

Настройка overflow: hidden скрывает полосу прокрутки. Установите overflow: scroll, чтобы убедиться, что полоса прокрутки постоянно отображается.

Чтобы использовать свойство ::webkit-scrollbar, просто нажмите .scroll, прежде чем вызывать его.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Смотрите этот живой пример

Ответ 2

.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}

Ответ 3

Вы устанавливаете overflow: hidden. Это скроет все, что слишком велико для <div>, что означает, что полосы прокрутки не будут отображаться. Дайте вашей <div> явную ширину и/или высоту и измените overflow на auto:

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

Если вы хотите показывать полосу прокрутки, если содержание больше, чем <div>, измените overflow на overflow: auto. Вы также можете показывать только одну полосу прокрутки с помощью overflow-y или overflow-x.

Ответ 4

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