html - Overflow-y 无法在 body 上的 div 上正常工作

Question

我的容器中有一个简单的 div，如下所示:

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

在元素点击时我调用这个简单的 jQuery 函数

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

我的想法是，当我滚动“.popup-fixed-info”div 时，背景在滚动，而不是 div 本身。

Answer 1

要解决这个问题，您需要隐藏正文溢出。在 jQuery 中执行此操作:

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

然后在关闭弹出窗口时将其删除。无论您有什么功能。

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