Всем привет! Подскажите способ отключения скролла страницы при открытом popup

Question

В общем, я добавляю класс через скрипт и вроде скролл отключился, но после закрытия popup страница подъезжает к своему началу. Я понимаю, что дело в position: fixed, но без него контент скроллится. Как можно все это обойти в моем случае?

const openPopup = document.querySelector('.block');
const popup = document.querySelector('.popup');
const btnClose = document.querySelector('.popup-close');

function closePopup() {
  popup.classList.remove('popup-open');
  document.body.classList.remove('stop-scroll');
}

openPopup.addEventListener('click', () => {
  popup.classList.add('popup-open');
  document.body.classList.add('stop-scroll');
});

btnClose.addEventListener('click', () => {
  closePopup();

});

.stop-scroll {
  overflow: hidden;
  position: fixed;
  top: -1268.8px;
  left: 0px;
  width: 100%;
}

.popup {
  position: fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  left: auto;
  width: 100%;
  height: 100%;
  transition: 0.5s ease-in-out;
  &::before {
    content: '';
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20;
  }
}

.popup__inner {
  height: 100%;
  right: -100%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  width: 776px;
  position: relative;
  z-index: 21;
  background: #fff;
  overflow: auto;
  overflow-x: hidden;
}

.popup-open {
  right: 0;
  z-index: 25;
  opacity: 1;
  .popup__inner {
    right: 0;
  }
}

<div class="popup">
  <div class="popup__inner">
    //Popup content//
  </div>
</div>

Answer 1

Вы можете отключить скролл просто добавив document.body overflow: hidden. Остальные стили добавлять не надо.

Answer 2

Для отключения часто использовал overflow: hidden для body, но недавно обнаружил, что в некоторых Safari на iOS это не срабатывает, пришлось использовать такую конструкцию.

html.off-scroll,
html.off-scroll body {
  overflow: hidden;
  touch-action: none;
}

Ну и для активации\деактивации вешаем\удаляем класс .off-scroll на document.querySelector('html').

БЛОГ НА HUSL

Всем привет! Подскажите способ отключения скролла страницы при открытом popup

Ответы (2 шт):