Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

CSS-селектор полосы прокрутки

• ::-webkit-scrollbar — вся полоса прокрутки
• ::-webkit-scrollbar-button — Кнопки на полосе прокрутки (стрелки вверх и вниз)
• ::-webkit-scrollbar-thumb — ползунок прокрутки на полосе прокрутки
• ::-webkit-scrollbar-track — дорожка полосы прокрутки
• ::-webkit-scrollbar-track-piece — Часть полосы прокрутки без ползунка.
• ::-webkit-scrollbar-corner — Пересечение вертикальной и горизонтальной полос прокрутки
• ::-webkit-resizer — Частичное оформление углов некоторых элементов (например: перетаскиваемые кнопки текстовой области)

::-webkit-scrollbar можно использовать только в браузерах, поддерживающих WebKit (например, Google Chrome, Apple Safari)

Изменить стиль полосы прокрутки

.container { 
   
	width: 100px;
	height: 100px;
	overflow: auto;
}
/* вся полоса прокрутки */
.container::-webkit-scrollbar { 
   
	width : 8px;
}
/* Ползунок внутри полосы прокрутки */
.container::-webkit-scrollbar-thumb { 
   
	border-radius: 10px;
	background: skyblue;
}
/*Отслеживание внутри полосы прокрутки*/
.container::-webkit-scrollbar-track { 
   
	border-radius: 10px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
	background: #eee;
}

визуализации

Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/179095.html Исходная ссылка: https://javaforall.cn