Посмотрите в Google, как люди блокируют прокрутку тела, и вы найдете несколько решений для этого. Базовый вариант использования:

  1. Включите отображение некоторых targetElement над телом с помощью position: absolute.
  2. После того, как он появится, воспользуйтесь каким-нибудь решением, чтобы отключить прокрутку текста, чтобы прокрутка внутри targetElement не прокручивала содержимое основного текста.

Вот возможные решения, с которыми вы столкнетесь:

1. Переполнение CSS

Этот подход работает для настольных браузеров и мобильного Android. Однако для мобильных устройств iOS (телефонов и планшетов) он не работает. Хорошо, попробуем подход №2.

2. Предотвратить дефолт

Отличное решение - прокрутка заблокирована! Но он также блокирует прокрутку внутри targetElement. Если содержимое в targetElement имеет высоту, превышающую заданную высоту элемента, вы захотите, чтобы он прокручивался !!!!!

3. Фиксированное положение

Если вы сделаете тело position: fixed, оно будет прокручиваться вверх, теряя исходное положение прокрутки тела. Не идеальный UX!

Предлагаемое решение - блокировка прокрутки тела

Блокировка прокрутки тела, которая работает со всем 😏

Поскольку все устройства, кроме iOS, соблюдают overflow: hidden на html/bodyelements, мы можем использовать этот подход для этих устройств.

Для iOS - мы проверяем, прокручен ли targetElement вниз или вверх. Если да, то примените e.preventDefault() раствор. Для определения этого необходим некоторый Javascript.

Логику достижения предложенного решения можно найти здесь.

Для удобства решение можно загрузить как пакет NPM body-scroll-lock и использовать в проектах, использующих ванильный JS или такие фреймворки, как React.

(кстати, если вы нашли пакет body-scroll-lock полезным, пожалуйста, пометьте репозиторий GitHub), чтобы помочь другим легче решить их проблемы с блокировкой прокрутки тела! ).