jQuery Popup 无法使用 Firefox 滚动

Question

我可以在除 Firefox 之外的所有浏览器中滚动浏览我使用 jQuery 创建的弹出窗口。在 Firefox 中，滚动条有效，但鼠标滚动无效：http://benjamintuercke.com/portfolio.html

如何使它与 Firefox 一起使用？我已经在 CSS 中将“溢出：自动”和“溢出：隐藏”更改为“溢出：滚动”，但这并没有帮助。我用谷歌搜索了很多，但我没有找到解决问题的方法。

你能帮帮我吗？

HTML：

      <div class="Details1">
        <div class="Hintergrund"></div>
        <div class="MeineWebsiteE"></div>
        <div class="X2"></div>
      </div>

CSS：

  .Details1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  .Details1:hover {
    overflow-y: auto;
  }

jQuery:

    $("#Detailclick1").on("click", function () {
      $(".Details1").css("z-index", "2");
      $(".Details1").fadeIn(500);
      $(".portfolio").css("position", "fixed");
      $("header").fadeOut(500);
    });

".portfolio" 是您没有打开弹出窗口时看到的内容。每当打开弹出窗口时，我都会将位置设置为“固定”，这样您就只能滚动浏览弹出窗口，而不是在后台滚动“.portfolio”。

Answer 1

Hintergrund 元素不允许您滚动，因为它的位置是固定的。如果我们删除这个元素并在弹出容器本身中提供背景会更好，即.Details1

HTML：

  <div class="Details1">
    <div class="MeineWebsiteE"></div>
    <div class="X2"></div>
  </div>

CSS：

 .Details1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
background: rgba(0,0,0,.85); // for getting transparent background
  }

  .Details1:hover {
    overflow-y: auto;
  }