Как сделать скроллбар «невыезжающим» за границы элемента?

Question

[Александр Жарченко]

Присутствует элемент в виде прямоугольника с закруглёнными краями, у которого в css overflow: scroll.
При скролле до конца или в самое начало элемента, сролл вылезает за скруглённый угол элемента.
Как сделать так, чтобы скролл уходил под скруглённый угол? Или что-то подобное.

Comments

[Ankhena]

Сделать так, чтобы это был скролл другого элемента, а не того у которого скругление.

Answer 1

[Bodrosh]

Можно сделать внешний блок со скруглением overflow: hidden, а уже внутри него блок со скроллом overflow: scroll

Comments

[Александр Жарченко]

Да, точно, благодарю!

Answer 2

[Василий]

Не нужно плодить лишние блоки, делается это вот так:

&::-webkit-scrollbar { 
            width: 2px;  // ширина скроллбара
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 100px; // закругляем ползунок, для красоты
            background-color: #bdbdbd; // задаём ползунку нужный цвет
        }

        &::-webkit-scrollbar-track {
            margin: 10px 0; // тот самый margin, который позволяет отступить от верха и низа блока
             background-color: #cacaca; // цвет поля по которому бегает ползунок
        }

Стили применяются к нужному блоку