溢出-无法在身体上正常工作

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");