Задать вопрос
efremandre
@efremandre
Frontend Developer

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

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

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

Подскажите, пожалуйста, как заблокировать экран на айфонах с помощью CSS или/и небольшого JS
  • Вопрос задан
  • 581 просмотр
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
HardBot
@HardBot
back-end, front-end developer
Вариант 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;};
  }
}
Ответ написан
Комментировать
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Для сафари одним 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 когда закрываете меню.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы