Как отключить прокрутку при наличии оверлея?

Question

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

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

На данный момент прокрутка нежелательна.

Как я могу отключить его?

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: auto;
  position: relative;
}

.line {
  white-space: nowrap;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  display: grid;
  place-items: center;
  background-color: #ccc;
}

<div class="container">
  <div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
  </div>
  <div class="overlay">
    <div class="sidebar">Sidebar</div>
  </div>
</div>

Answer 1

Вы можете добавить переполнение только для содержимого, а не для основного div

Проверьте фрагмент:

.container {
  width: 200px;
  border: 1px solid black;
  position: relative;
}
.content
{
overflow: auto;
height: 100px;
}
.line {
  white-space: nowrap;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  display: grid;
  place-items: center;
  background-color: #ccc;
}

<div class="container">
  <div class="content">
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
    <div class="line">Hello World, Hello World, Hello World</div>
  </div>
  <div class="overlay">
    <div class="sidebar">Sidebar</div>
  </div>
</div>

Answer 2

вы можете добавить событие при нажатии кнопки. Make

.container

переполнение: скрыто;

в том же событии при запуске оверлея, прыжок это помогает.