Метод проникновения прокрутки HTML5

Веб-сайт необходимо адаптировать для мобильной версии. Для мобильных H5 и веб-страниц используются решения с гибкой версткой, такие как Bluma.

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

Чтобы отобразить конкретные сведения об одной строке данных в таблице, обычное решение — использовать новую страницу или всплывающее окно.

Здесь используется всплывающее окно. Детали данных после нажатия на одну строку данных используют модальную карту Bluma.

Подробную информацию и примеры можно найти по адресу: https://bulma.io/documentation/comComponents/modal/.

После щелчка по одной строке данных во всплывающем окне отображаются подробные данные, а для всей модальной карты устанавливается положение: фиксированное;

Нижний колонтитул отсутствует, установите высоту модальной карты на высоту всего экрана: 100vh

Производительность:

• При отображении в браузере Chrome вся модальная карточка занимает весь экран.
• Дисплей на мобильном телефоне также заполнен, но проблема в том, что если вы будете двигаться в соответствии с жестом, часть поля поиска браузера будет поднята вверх. В это время страница со списком данных под всплывающим окном может быть поднята. можно сдвинуть, а затем заголовок всплывающего окна закроет исходную часть поля поиска браузера, но между этим есть задержка, вы можете четко видеть данные на странице ниже
• На других мобильных телефонах будет другой дисплей. Если скорость скольжения относительно высокая и вы скользите сразу после появления всплывающего окна, вы увидите небольшое пустое пространство в нижней части всплывающего окна. Аналогично странице. Ниже всплывающее окно можно прокручивать. И есть очевидная задержка и отображение прокрутки данных.

Решение:

Переполнение JS + CSS: скрыто

Динамически добавлять CSS-классы на HTML-страницу во всплывающем окне через JS.

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });} function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('обрезано'); $target.classList.add('is-active');}

 обрезано {переполнение: скрыто! важно}

Когда всплывающее окно закроется, удалите класс css страницы через JS: is-clipped

 function closeModals() { rootEl.classList.remove('is-cipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

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

JS + CSS Позиция: фиксированная + прокруткаTop

Идеи плана:

1. Когда появится всплывающее окно, установите фиксированное положение HTML. После закрытия всплывающего окна отмените атрибут postion HTML.
2. Поскольку страница списка будет прокручиваться, а выбранная строка может появиться после прокрутки, необходимо вычислить значение ScrollTop самой HTML-страницы.
3. Потому что после установки фиксированной позиции при появлении всплывающего окна значение прокрутки HTML-страницы станет равным 0 и вернется в верхнюю часть страницы. Поэтому после закрытия всплывающего окна вам необходимо вручную установить значение. значение ScrollTop HTML-страницы, позволяющее прокручивать ее до исходного положения HTML-страницы.
4. Для совместимости вам необходимо установить значение ScrollTop для разных свойств.

Перед всплывающим окном:

 const ScrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;global.document.documentElement.style.position = 'fixed';this.scrollTop = ScrollTop;

Закройте всплывающее окно:

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; global.pageYOffset = this.scrollTop; global.document.documentElement.scrollTop = this.scrollTop global; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.