Overflow-y not working properly on div upon body

Question

I have simple div centered in my container like this:

.popup-fixed-info{
    position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    overflow-y:scroll;
    max-height:80%;
    visibility:hidden;
    opacity:0;
    z-index:10;
}

on element click I call this simple jQuery function

function open_popup(class_to_open) {
  $('.popup-fixed-info').css("visibility", "visible");
  $('.popup-fixed-info').css("opacity", "1");
}

The think is that when i scroll the '.popup-fixed-info' div the background is scrolling and not the div itself..

Answer 1

To fix that you need to give the body overflow hidden. Do this in the jQuery:

function open_popup(class_to_open) {
  $('.popup-fixed-info').css("visibility", "visible");
  $('.popup-fixed-info').css("opacity", "1");
  $('body').css("overflow", "hidden");
}

Then remove it when you close the popup. Whatever function you have for that.

$('body').css("overflow", "auto");