Как отключить скролл на iPhone?

Question

[Andrew E]

При открытии меню блокирую скролл экрана, делаю это с помощью overflow: hidden который навешиваю body.

Но на айфоне, этот финт не работает. В сети внятных решений не нашел, кроме библиотек и громадин js кода, у самого ума не хватает пока. ))

Подскажите, пожалуйста, как заблокировать экран на айфонах с помощью CSS или/и небольшого JS

Comments

[Александр]

Можно попробовать с помощью CSS свойства -webkit-overflow-scrolling: touch; overflow: hidden;.
Например, если вы хотите отключить скролл для элемента с ID #element:

#element {
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

Answer 1

[HardBot]

Вариант 1:
body {position: fixed;}

window.addEventListener("scroll", event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});

Вариант 2:

div {  
	max-height: 20rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 0.25rem;
  ::-webkit-scrollbar-track {
    border-radius: 0.125rem;
    background-color: lightgray;
  }
  ::-webkit-scrollbar {
    width: 0.25rem;
    border-radius: 0.125rem;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    background-color: gray;};
  }
}

Answer 2

[Владимир Проскурин]

Для сафари одним overflow: hidden не обойтись, он все равно будет скроллить боди, если у него большое содержимое. Нужно костылить. Чаще всего пишу что-то типа этого

const bodyEl = document.body;
let lastScrollPos = 0;
const scrollBodyLock = () => {
    lastScrollPos = window.pageYOffset;
    bodyEl.style.overflow = 'hidden';
    bodyEl.style.position = 'fixed';
    bodyEl.style.top = `-${lastScrollPos}px`;
    bodyEl.style.width = '100%';
}

const scrollBodyUnlock = () => {
    bodyEl.style.removeProperty('overflow');
    bodyEl.style.removeProperty('position');
    bodyEl.style.removeProperty('top');
    bodyEl.style.removeProperty('width');
    window.scrollTo(0, lastScrollPos);
}

(можно часть свойств переписать на css класс, и просто его добавлять/удалять, так код получится чуток проще).

Просто дергаете scrollBodyLock во время показа меню, и scrollBodyUnlock когда закрываете меню.