Как сделать блок на всю область просмотра под которым нельзя скроллить контент?

Question

[Артем Пономарев]

Здесь при открытии меню в мобильной верстке, оно получается как единственный блок на сайте. Пропадает скролл-бар, контент под меню нельзя двигать. Хочу себе такое же меню на сайт, как это реализовать?

Answer 1

[Ragtime Kitty]

При открытии меню вешается класс на body

.nonScroll {
    overflow: hidden;
}

Т.е. при открытом меню у body просто отключен скролл.

Comments

[Артем Пономарев]

Спасибо)

[Ragtime Kitty]

Артем Пономарев, ну а как сам блок на весь экран сделать вы уж разберетесь, да?

[Артем Пономарев]

Ragtime Kitty, конечно)

[Rustam Bainazarov]

Артем Пономарев, только стоит отметить, что это не будет работать в Safari и iOS Safari.

[Rustam Bainazarov]

Для решения этой проблемы я использую две своих примитивных функции:

// Фиксация body
function bodyFixPosition() {

  if (!document.body.hasAttribute('body-scroll-position-fixed')) {

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

    document.body.setAttribute('body-scroll-position-fixed', 'true');
    document.body.style.overflow = 'hidden';
    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

  document.body.removeAttribute('body-scroll-position-fixed');
  document.body.style.overflow = '';
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.left = '';

  window.scroll(0, scrollCSSPosition);

}

Соответственно, вызываю их, когда нужно. Этот подход фиксирует прокрутку body во всех браузерах (проверял в т. ч. в древних Safari 8+ и IE10+). Код тоже можно оптимизировать, наверное, но я в JS — более чем так себе.

[Ragtime Kitty]

Рустам Байназаров, вроде можно еще все в див обернуть, в нем overflow: hidden работает. Но в примере с этим вообще не заморачивались.

[Rustam Bainazarov]

Ragtime Kitty, это уже ближе к костылю + в таком случае на iOS начнутся проблемы с наследованием скролла из-за его rubber band (скачки и дерганина; и я не про -webkit-overflow-scroll: touch;).

Единственный скролл, который нормально и полноценно работает в iOS Safari, — на уровне body.

[Ragtime Kitty]

Рустам Байназаров, пару раз всего приходилось обертку делать, но ничего подобного я не встречала.
Со скроллом в дивах тоже проблем не было. Ну да ладно

[Rustam Bainazarov]

Ragtime Kitty, возможно, вы в overflow-областях держали относительно просто контент. Если там будут SVG, разные блоки с трансформациями, где-то будут использоваться фильтры, анимации, flex-обертки и ряд элементов на абсолютном позиционировании — то тут начинается.

Ну и проблема наследования прокрутки остаётся на месте.