0

I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.

IMG

I have tried using css by applying no-scroll css to the background div.

.no-scroll {
    position: fixed;
    overflow: hidden
}

But every time I applied no-scroll class to the element, it will bounced back top the top.

I also followed this article

But it disable the entire window scroll and also the font div too. Any suggestion?

Community
  • 1
  • 1
Wakeme UpNow
  • 523
  • 1
  • 4
  • 22

2 Answers2

1

I think you should wrap both divs in a container and the toggle class on that. Something like this

var btn = document.querySelector('button'),
    wrapper = document.querySelector('.wrapper');

btn.addEventListener('click', function(){
  wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }

.wrapper { 
  height: 500px;
  overflow: scroll;
  border: solid 2px black;
  padding: 2rem;
}

.lower_div {
  background: red;
  width: 100%;
  
  height: 600px;
  position: relative;
}


.modal {
  display: none;
  height: 20px;
  width: 100%;
  position: absolute;
  z-index: 2;
  background: tomato;
}

.modal-is-visible .modal { display: block;}

.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
  <div class="lower_div">
    <div class="modal">
    </div>
  </div>
</div>
VilleKoo
  • 2,827
  • 2
  • 14
  • 23
0

You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.

You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.

SmashingQuasar
  • 411
  • 2
  • 13