exxxcitation1
@exxxcitation1
Ваше Эникейшество

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

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

616872207da73769536559.png
  • Вопрос задан
  • 679 просмотров
Решения вопроса 1
@Bodrosh
Можно сделать внешний блок со скруглением overflow: hidden, а уже внутри него блок со скроллом overflow: scroll
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@just_v
Frontend dev
Не нужно плодить лишние блоки, делается это вот так:
&::-webkit-scrollbar { 
            width: 2px;  // ширина скроллбара
        }

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

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


Стили применяются к нужному блоку
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы