溢出-無法在身體上正常工作

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