模式打开时如何允许背景div可滚动

Question

the shadow view is a modal when it pops up, I still want my background div behind the shadow view scrollable. Is there a way to achieve that?

.main-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
 }

I need to have overflow-y to be auto in order to implement react-infinite-scroller framework.

This is modal HTML and css

<div class="modal-backdrop"></div>
<div class="modal"
  tabindex="-1"
  role="dialog"
  (click)="onClose()"
  >
</div>
.modal {
   overflow-x: hidden;
   overflow-y: auto;
}

Answer 1

Here is what you are looking for

 const showDialog = () => { document.getElementById('dialog').classList.add('show'); const scrollY = document.documentElement.style.getPropertyValue('--scroll-y'); const body = document.body; }; const closeDialog = () => { const body = document.body; const scrollY = body.style.top; body.style.position = ''; body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1); document.getElementById('dialog').classList.remove('show'); }; window.addEventListener('scroll', () => { document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`); });

 body { display: flex; font-size: 1.5em; justify-content: center; line-height: 1.5; margin: 0; padding: 0; } #text { max-width: 800px; } #dialog { display: none; position: fixed; top: 10vh; left: 10vw; width: 80vw; height: 80vw; border: 1px solid #eee; border-radius: 4px; padding: 10px; text-align: center; z-index: 1; background-color: #444; color: #fff; } #dialog.show { align-items: center; display: flex; flex-direction: column; } #dialog span { margin-bottom: 1em; } #show, #close { background: #da1b60; border: none; color: #fff; display: block; font-size: 1em; padding: 1em; width: 200px; } #show:hover, #close:hover { background: #ff8a00; cursor: pointer; } #show { position: fixed; top: 30px; left: 10px; } #close { position: relative; }

 <button id='show' onClick='showDialog()'>Show Dialog</button> <div id='text'>...Your Content here... </div> <div id='dialog'> <span>Oh wow, modal. We can close this now.</span> <button id='close' onClick='closeDialog()'>Close Dialog</button> </div>