Is it possible to prevent scrolling in iOS Safari while keeping the current position?

R

Rustam Bainazarov2018-12-15 22:54:45

css

Rustam Bainazarov, 2018-12-15 22:54:45

Comrades, tell me, please, is it possible to disable scrolling in iOS Safari without using body { position: fixed; } and similar solutions?
I want the ban to work like body { overflow: hidden; } in Chrome, in other words, so that the current scroll position is preserved (does not scroll to the top of the document), and the viewport's height does not jump when it is activated.
At the same time, it is necessary that it be possible to save scrolling in a conditional modal window.
Both a JS- and a CSS-solution of any degree of stubbornness will do (if, of course, it exists and works adequately).
PS If there is a solution, something tells me that it is complex and is not limited to a relatively simple JS code or CSS hack, because even on fairly advanced resources this problem has not been solved.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Rustam Bainazarov, 2018-12-20
@SmthTo

I found a fairly simple solution on kinopoisk.ru. As always in such cases, it lay on the surface.
We save the current scroll position of the body to the variable, on the body we hang the resulting value (only negative) in the top property with styles. You also need to add position: fixed and left: 0 (right: 0 is also possible, it will not be worse). Yes, yes, still fixed, therefore, can break transform.
Here are the inline styles for body from the work of this method on Kinopoisk:

top: -345px;
left: 0px;
right: 0px;
position: fixed;

I checked it on my devices: it works in iOS Safari 11 and 12. We could not find other ways to solve this problem.
update. I forgot to add the features that I wrote, they are not super-hyper cool, but they work:

// 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);

  }

}

For Bootstrap's modal windows, you can make a generic call to these functions when opening and closing them:

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

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

A

Andrew, 2018-12-15
@KickeRockK

Which version?
Have you tried this?