В этой статье мы разберем весьма кастомный вопрос. Кажется, что сама по себе схема сложная, но фактически простая. Сегодня мы создадим скрол внутри модального окна. Размер модального окна генерируется в зависимости от количества элементов в массиве. Но обо всем по порядку. Прокрутка внутри модального с помощью css, давайте начнем пожалуй.
CSS — Прокрутка внутри модального окна
На самом деле все сравнительно тривиально и не сложно для любого дизайнера. А вот для начинающих на мой взгляд самое то.
Дано:
- Модальное окно веб-приложения.
- Максимальная высота модального окна.
- Заголовок модального окна.
- Кнопка в нижней части модального окна.
- Список элементов внутри модального окна.
Задача:
- Создать динамический скрол внутри модального окна, который будет применяться только к списку айтемов.
Прежде всего, необходимо добраться до ключевого элемента. Для этого используем кнопку f12 в браузерах и активно пользуемся средствами разработчика, которые позволят нам определить, к какому классу принадлежит наш аккордеон сущностей. Прежде чем переходить к продакшн коду, поиграйтесь с кодом прямо в консоли разработчика в браузере. Это позволит вам четко понять с каким объектом экрана вы работаете. Здесь весьма важно не ошибиться, ведь задавая стили определенному классу вы можете не знать, что к нему относятся сразу несколько объектов. И что самое главное они могут находиться не только в видимой на данный момент части экрана.
В целом. После того как класс определен применяем к нему следующую строку:
|
1 2 3 |
.className { overflow-y: auto; } |
Таким образом мы указываем, что для класса className в случае необходимости визуализировать полосу прокрутки. Выглядит это так:
Справа появился наш скрол. Обратите внимание, что прокрутка появилась не у всего модального окна, а только у списка айтемов.
ПыСы: Все кнопки и названия айтемов были замазаны намеренно.
Новое!
Спасибо за внимание, надеюсь вы решите ваши кастомные задачки. Хотите больше статей по дизайну на css? Оставляйте комментарии с темами, которые хотели бы вы увидеть в дальнейшем в виде статей. Подписывайтесь на нашу группу в ВК и Youtube-канал!