Как предотвратить прокрутку тела, но разрешить прокрутку наложения в CSS?

В этой статье мы узнаем, как предотвратить прокрутку тела, но разрешить прокрутку наложения. Цель состоит в том, чтобы добавить в оверлей функцию, с помощью которой мы сможем прокручивать оверлей, но не сможем прокручивать фоновое содержимое. Это означает, что когда оверлей открыт, фон/тело фиксируются и не двигаются. Как правило, мы можем использовать этот процесс для создания эффекта модального типа в нашем дизайне. В CSS нет свойства по умолчанию, которое мы можем добавить, чтобы этот процесс работал.

Подход: чтобы предотвратить прокрутку тела, но разрешить прокрутку наложения, мы должны переключить переполнение, чтобы оно было скрыто, когда отображается наложение. И хотя переполнение всей страницы скрыто или прокрутка отключена, переполнение по оси Y наложения включено, и переполнение можно прокручивать.

Мы можем переключить это переполнение тела с прокрутки на скрытый и наоборот, используя какой-нибудь базовый язык сценариев, например JavaScript. Но в этой статье мы не будем обсуждать это переключение, а также увидим отключение фоновой части.

Используемое имущество:

• переполнение: это позволяет нам управлять тем, что происходит, когда содержимое элемента слишком велико, чтобы поместиться в заданном пространстве. Это приводит к тому, что материал «перетекает» в другое место либо по горизонтали (ось X), либо по вертикали (ось Y) (ось Y). Его можно указать в двухосном отдельно с помощью overflow-xandoverflow-y. Он может принимать следующие значения.
  • visible: если для переполнения не указано значение свойство, это значение по умолчанию. Благодаря этой характеристике мы можем четко видеть наши вещи, когда они перетекают в другую область.
  • hidden: часть текста, которая вышла за пределы, будет удалена — она будет «невидимой», если мы используем скрытое значение. Нам не нужно беспокоиться о пространстве, занимаемом переполнением. Материал больше не будет находиться в области, где он переливался после того, как был обрезан.
  • прокрутка: значение прокрутки также обрезает текст и добавляет полосу прокрутки, поэтому мы можем прокручивать и видеть, что было обрезано.
  • auto: значение auto обнаруживает переполнение и вставляет полосу прокрутки в соответствующем направлении.

Пример. Приведенный выше подход демонстрируется в приведенном ниже коде.

Выход: