Привет! Делаем блок с кастомным скроллом по вертикали - быстро, просто, пригодится в хозяйстве

0️⃣ Дано: блок text-container, внутри заголовок и текст

1️⃣ Вторая внешняя обертка scroll-wrapper: если у блока будет радиус скругления, то чтобы скролл не выходил за пределы угла, обернем контент двумя div с разными классами. Но потом мне потребовалось справа от текста до скролла сделать отступ и я добавила еще одну обертку text-wrapper

2️⃣ Внешней обертке text-container задаем overflow-y: hidden; а для внутренней задаем ограничение высоты и overflow-y: auto, если контента мало, то скролла не будет. Нужен фон, граница, радиус границы - все это задаю внешнему блоку.

3️⃣ Для внутреннего блока задаем стили скролла, иногда их называют устаревшими, но меня они пока устраивают, здесь есть все что мне нужно:

.scroll-wrapper::-webkit-scrollbar {
    width: 8px;
}

.scroll-wrapper::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 1rem;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: orange;
    border-radius: 1rem;
}

Для не webkit-браузеров(например moz), с большой вероятностью нужны дополнительные стили, такие так scrollbar-width, scrollbar-color

✅ codepen

#css #scroll