Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.
В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed, засим, может поломать transform.
Вот такие 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();
})
Простой
