Могу ли я установить переполнение: скрытый, но все же показать полосу прокрутки?

Question

Я хочу отключить прокрутку, когда появляется всплывающее окно, но я ненавижу, как вся страница меняет размер при добавлении / удалении полосы прокрутки.Есть ли способ отключить прокрутку, не скрывая полосу прокрутки?

Вроде как, когда вы устанавливаете переполнение: выделите элемент, у которого недостаточно содержимого для прокрутки: он по-прежнему показывает полосу прокрутки, но отключен.

//when popup is open, disable scroll on body
body.popupOpen {
    overflow: hidden;
}

Answer 1

Убедитесь, что переполнение (полоса прокрутки) находится на элементе body, затем добавьте оверлей, который будет просто покрывать тело и полосу прокрутки при отображении всплывающего окна.

Вот упрощенный пример с наложением, в котором невозможно прокрутить:

body {
  overflow: auto;
  margin: 0;
  max-height: 100vh; /* no more than the height of the viewport*/
}

html {
  overflow: hidden; /* This one is important to avoid the propagation */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.content {
  min-height: 500vh;
}

<div class="overlay">

</div>
<div class="content">
</div>

Answer 2

Вы можете создать div, который заполняет весь вид страницы, и просто сделать его прозрачным, таким образом, вы можете просто включить / отключить прокрутку div для управления полосой прокрутки:

.theDivInactive { 
   background: none;
   pointer_events: none;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
  }

and switch the class when the popup is on the screen:

  .theDivActive { 
   background: none;
   pointer_events: none;
   width: 100vw;
   height: 100vh;
   overflow: scroll;
  }
`

Answer 3

Ответ - нет, но вы можете установить значение «скрытый» и создать элемент для имитации полосы прокрутки, но зачем вам это делать, это только сбивает пользователя с толку.