Как запретить скролл страницы при открытии попапа?

Question

[vikas_web]

есть адекватный способ запретить скролл страницы?
тоесть иметь возможность скролить только попап
(когда открыли его)

Comments

[Ankhena]

Да, скролл убирается свойством overflow: hidden при наличии заданной высоты.

[vikas_web]

Ankhena, не кроссбраузерный способ
суть - открыли попап, могу скролить в нем
а сама страница не скролится пока не закрою попап

[Ankhena]

vikas_web, в каком браузере он не работает?

[Дмитрий]

В момент открытия попап, можно добавить overflow: hiden, тегу body, в момент закрытия снять ... А самому попапу при конкретно заданной высоте блока задать overflow-y: auto. Высоту попапу можно например задать height: 80vh. Тогда высота будет динамичной в зависимости от устройства.

[vikas_web]

Ankhena, Ankhena, он работает, но если убирать/ставить оверлоу, то будет странно смотреться на сафари

[Alex]

Изучите как работает тут

[Ankhena]

vikas_web, ладно, будут подробности смущающих вас странностей, позовете.

[Антон Литвиненко]

обычно вешают overflow: hidden на body, но в сафари действительно не работает

[vikas_web]

Alex, так там для боди она есть
а для попапа - нет

а суть в том, чтобы ставить прокрутку на попапе
а убрать на боди

[Alex]

Антон Литвиненко, Кажись для сафари, нужно ставить ещё и на html если не ошибаюсь

[vikas_web]

Ankhena, AntonLitvinenko подтвердил, что не работает

[Антон Литвиненко]

Alex, я уже не помню как мы решили, либо совсем не решили, либо сделали сразу внутри боди еще одну обертку и при открытии модалки давали ей overflow: hidden, height: 100vh; position relative. не на чем проверить

[Ankhena]

vikas_web, на browswerstack работает, в версиях в которых было не лень проверить и у друзей на 11 и 6 айфонах. Это не весь охват, конечно.

У меня стоит так:
для html min-height 100%
для body min-height 100vh
при открытии модалки вешаю overflow: hidden на body.

Всегда можно заменить body на обертку для всего сайта.
Возможно, проблемы и со стилями самой модалки.

Но ссылки на проблемную страницу нет (с песочницей в данном случае не удобно работать), так что... Болею, извините, угадайка не работает.

[vikas_web]

Ankhena, поправляйтесь, не болейте!)

не так объяснила
работать то будет
но проблема другая

мне его убирать нельзя
иначе будет скачек ( то есть скролл справа, то нет)

Говорят плагином каким то делают (скролл для боди всегда будет виден, но скролить можно будет только тогда, когда мы НЕ открыли попап)
, может есть другое решение

[Ankhena]

vikas_web, спасибо, я больше не буду :)

Можно на js вычислять ширину полосы прокрутки и убирая скролл, задавать соответствующий отступ.

Можно ещё натворить какую-нибудь дичь, типа обертке overflow hidden, а для body scroll, но по-моему, это перебор.

[vikas_web]

Ankhena, а какой хороший вариант?

[Антон Литвиненко]

vikas_web, посмотри как у бутстрапа сделана модалка. Я когда писал свое решение отталкивался от бутстрапа

[Ankhena]

vikas_web, о том, что должен смущать прыжок я узнала недавно. Мне кажется это был ваш же вопрос.

По моему мнению, пользователя в этот момент больше интересует открытие и содержимое модалки.
Я делаю достаточное затемнение оверлею и не парюсь.
Но я и не ux дизайнер.

Answer 1

[Dimox]

Делаю следующий образом.

html {
  &.overflow {
    overflow: hidden;
    margin-right: var(--scrollbar-width, 0);
  }
}

При отсутствии скроллбара добавляется отступ --scrollbar-width, равный его ширине, которая определяется скриптом:

const getScrollbarWidth = function () {
  const $scrollDiv = document.createElement('div');
  $scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild($scrollDiv);
  const scrollBarWidth = $scrollDiv.offsetWidth - $scrollDiv.clientWidth;
  document.body.removeChild($scrollDiv);
  return scrollBarWidth;
};

В момент открытия и закрытия попапа запускается скрипт:

const $html = $('html');
if ($html.is('.overflow')) {
  $html.removeClass('overflow');
  $html.css('--scrollbar-width', '');
} else {
  $html.addClass('overflow');
  $html.css('--scrollbar-width', `${getScrollbarWidth()}px`);
}

А скролл попапа делать уже внутри блока с попапом.