CSS — Прокрутка внутри модального окна

CSSВ этой статье мы разберем весьма кастомный вопрос. Кажется, что сама по себе схема сложная, но фактически простая. Сегодня мы создадим скрол внутри модального окна. Размер модального окна генерируется в зависимости от количества элементов в массиве. Но обо всем по порядку. Прокрутка внутри модального с помощью css, давайте начнем пожалуй.

CSS — Прокрутка внутри модального окна

На самом деле все сравнительно тривиально и не сложно для любого дизайнера. А вот для начинающих на мой взгляд самое то.

Дано:

  1. Модальное окно веб-приложения.
  2. Максимальная высота модального окна.
  3. Заголовок модального окна.
  4. Кнопка в нижней части модального окна.
  5. Список элементов внутри модального окна.

Задача:

  1. Создать динамический скрол внутри модального окна, который будет применяться только к списку айтемов.

Прежде всего, необходимо добраться до ключевого элемента. Для этого используем кнопку f12 в браузерах и активно пользуемся средствами разработчика, которые позволят нам определить, к какому классу принадлежит наш аккордеон сущностей. Прежде чем переходить к продакшн коду, поиграйтесь с кодом прямо в консоли разработчика в браузере. Это позволит вам четко понять с каким объектом экрана вы работаете. Здесь весьма важно не ошибиться, ведь задавая стили определенному классу вы можете не знать, что к нему относятся сразу несколько объектов. И что самое главное они могут находиться не только в видимой на данный момент части экрана.

В целом. После того как класс определен применяем к нему следующую строку:

Таким образом мы указываем, что для класса className в случае необходимости визуализировать полосу прокрутки. Выглядит это так:

css прокрутка

Справа появился наш скрол. Обратите внимание, что прокрутка появилась не у всего модального окна, а только у списка айтемов.

ПыСы: Все кнопки и названия айтемов были замазаны намеренно.

Новое!


Спасибо за внимание, надеюсь вы решите ваши кастомные задачки. Хотите больше статей по дизайну на css? Оставляйте комментарии с темами, которые хотели бы вы увидеть в дальнейшем в виде статей. Подписывайтесь на нашу группу в ВК и Youtube-канал!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...