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

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

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

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

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

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

P. S. Если решение есть, что-то мне подсказывает, что оно комплексное и не ограничивается относительно простым JS-кодом или CSS-хаком, потому что даже на достаточно продвинутых ресурсах данная проблема не решена.
  • Вопрос задан
  • 317 просмотров
Решения вопроса 1
SmthTo
@SmthTo Автор вопроса
Все перепёлки мира будут оплакивать мою смерть
Достаточно простое JS-решение нашел на 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. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:
// Фиксация body
function bodyFixPosition() {

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

  document.body.style.position = 'fixed';
  document.body.style.top = '-' + scrollPosition + 'px';
  document.body.style.left = '0';

}

// Расфиксация body
function bodyUnfixPosition() {

  var scrollCSSPosition = document.body.style.top.replace(/[^0-9.]/g, ''); // Получаем значение позиции прокрутки из CSS, что мы установили первой функцией в body, в виде числа без px, но с точкой, если значение дробное

  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.left = '';

  window.scroll(0, scrollCSSPosition);

}


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

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

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

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

Войти через центр авторизации
Похожие вопросы
AI Factory Санкт-Петербург
от 150 000 до 300 000 руб.
EducaGroup Санкт-Петербург
от 90 000 руб.
Inreco LAN Владимир
от 50 000 до 90 000 руб.
21 апр. 2019, в 19:08
75000 руб./за проект
21 апр. 2019, в 18:14
500 руб./за проект
21 апр. 2019, в 15:25
50000 руб./за проект