How to disable background scroll on pop-up?-CodePudding

Im new to the web dev world and wanted to know if there a way to disable background scrolling.

I tried z-index for the pop-up to display above all element but some background content was getting overlapped with the pop-up.

Im not much familiar with JS but was nt able to get any help.

Below is the code

body {
  height: 200vh;
}
.bg-noscroll {
  
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  transform: translateY(-60px);
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}


.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.content {
  height: 250px;
}
.popup .content {
  overflow-y: scroll;
}

@media screen and (max-width: 700px){
  .popup{
    width: 70%;
 }

<body > 
<span><a  href="#popup">Full Recipe</a></span>
          <div id="popup" >
    <div >
        <h3>Foxtail Millet Porridge:</h3>
        <a  href="#">×</a>
        <div >
            <span>Ingredients:<br>here are some things that you'd use to make this<br> isn't this amazing?<br>Yes, it is!<br>
              this is getting loooooong<br>this will take me a while!<br>oh... yes it will<br>we're getting close<br>and we should be there                <br>or not...<br>Im losing hope<br>and patience<br>with how long this is taking<br>I could really cry<br>
               but we'll get there soon<br>safe and sound<br>free as pie<br>I dont know what I meant by that<br>
               this is taking long mannnn<br>
            </span>

Thank you for your help!

CodePudding user response：

When you set the body height to 200vh, it means that your page is twice the height of the monitor. When you do not set the body height, the height is automatically adjusted to the size of the content.

CodePudding user response：

Currently, you have to make use of javascript and add or remove the scrollbar-properties or css-class using a hashchange event-listener for example:

window.addEventListener("hashchange", event => {
  const newHash = new URL(event.newURL).hash,
    el = document.getElementById(newHash.substr(1));
  if (el && el.classList && el.classList.contains("overlay")) {
    document.body.style.overflow = "hidden";
    // or document.body.classList.add("bg-noscroll");
  } else {
    document.body.style.overflow = "";
    // or document.body.classList.remove("bg-noscroll");
  }
});

Starting from chromium 101 the support for the :has()-selector has been implemented (experimental flag only) and the current chromium 105 dev channel brings the :has()-selector enabled by default.

With the has()-selector it will be possible using:

body:has(.overlay:target) {
  overflow: hidden;
}

Keep also mind, it may take some more time for other browsers to implement the has()-selector. Therefor the best would be to stick with the javascript method for a while.