SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть.

Возможно ли запретить прокрутку в iOS Safari с сохранением текущего положения?

Товарищи, подскажите, пожалуйста, есть ли возможность запретить прокрутку в iOS Safari без использования body { position: fixed; } и подобных этому решений?

Хочется, чтобы запрет работал по типу работы body { overflow: hidden; } в Chrome, иными словами, чтобы текущее положение прокрутки сохранялось (не прокручивало бы наверх документа), а высота viewport'a не скакала при его активации.

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

Подойдёт как JS-, так и CSS-решение любой степени упоротости (если оно, конечно, есть и работает адекватно).

P. S. Если решение есть, что-то мне подсказывает, что оно комплексное и не ограничивается относительно простым JS-кодом или CSS-хаком, потому что даже на достаточно продвинутых ресурсах данная проблема не решена.
  • Вопрос задан
  • 883 просмотра
Решения вопроса 1
SmthTo
@SmthTo Автор вопроса, куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.

В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed.

Вот такие inline-стили для body от работы данного метода на Kinopoisk:
top: -345px;
left: 0px;
right: 0px;
position: fixed;

Проверил у себя на устройствах: работает в iOS Safari 11 и 12. Иных путей решения данной проблемы найти не удалось.

Update. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:
// 1. Фиксация <body>
function bodyFixPosition() {

  setTimeout( function() {
  /* Ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) */

    if ( !document.body.hasAttribute('data-body-scroll-fix') ) {

      // Получаем позицию прокрутки
      let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

      // Ставим нужные стили
      document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.top = '-' + scrollPosition + 'px';
      document.body.style.left = '0';
      document.body.style.width = '100%';

    }

  }, 15 ); /* Можно задержку ещё меньше, но у меня работало хорошо именно с этим значением на всех устройствах и браузерах */

}

// 2. Расфиксация <body>
function bodyUnfixPosition() {

  if ( document.body.hasAttribute('data-body-scroll-fix') ) {

    // Получаем позицию прокрутки из атрибута
    let scrollPosition = document.body.getAttribute('data-body-scroll-fix');

    // Удаляем атрибут
    document.body.removeAttribute('data-body-scroll-fix');

    // Удаляем ненужные стили
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.width = '';

    // Прокручиваем страницу на полученное из атрибута значение
    window.scroll(0, scrollPosition);

  }

}


Для Bootstrap'овских модальных окон можно сделать универсальный вызов этих функций при их открытии и закрытии:

$(document).on('shown.bs.modal', function () { // открытие любого модального окна Bootstrap
  bodyFixPosition();
})

$(document).on('hidden.bs.modal', function () { // закрытие любого модального окна Bootstrap
  bodyUnfixPosition();
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
Какая версия?
Это пробовали?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
BS lab Минск
от 1 200 usd.
Star-staff Москва
от 100 000 до 150 000 руб.
iGooods.ru Санкт-Петербург
от 170 000 до 250 000 руб.
22 окт. 2019, в 08:46
150000 руб./за проект
22 окт. 2019, в 08:40
10000 руб./за проект