How to disable scrolling when overlay exists?

Question

Consider a container with an overflowing content. User can scroll in both directions to inspect the content.

When user presses a button (missing in the demo below), the whole container is covered with an overlay that has a sidebar.

At this point, the scrolling is not desirable.

How could I disable it?

.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>

Does this answer your question? [Prevent body scrolling but allow overlay scrolling](https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling) — Awais, Jan 09 '20 at 06:52

score 2 · Answer 1 · answered Jan 09 '20 at 06:43

2

you can add event on button click make

.container

overflow: hidden;

on same event when you trigger overlay, hop this helps.

answered Jan 09 '20 at 06:43

PrashantAjani

376
3
6

score 1 · Accepted Answer · answered Jan 09 '20 at 07:52

You can add the overflow for the content only not the main div

Check the snippet:

.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>

How to disable scrolling when overlay exists?

2 Answers2