Question

我有一个包含弹出菜单的可滚动区域。从概念上讲，这样的事情：

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
  <div>
    <a href="javascript:$('#popup').show()">Click here</a>
    <div style="position:relative">
      <div id="popup"
           style="display:none; position:absolute; width:150px; height:150px">
        ... more content. This div gets shown and hidden by jquery on click events.
      </div>
    </div>
  </div>
</div>

问题是当弹出菜单弹出时，它也包含在滚动div中，并且无论我制作z-index有多高，它都不会出现在100x100像素可滚动区域之外。我当然意识到，从某种意义上说，当我告诉外部div溢出时，正是我所要求的：首先是auto。但对于我的用例，它不是我想要的 - 我希望弹出菜单“在顶部”并且能够延伸到可滚动区域之外，同时仍然保持在正确的位置，也就是说，直接位于“点击此处”链接。即使“点击此处”链接可以随着容器的滚动而移动。

我也意识到我可以使用一些复杂的解决方法，比如将弹出窗口完全放在可滚动的div之外并使用javascript来定位它。然后我需要对滚动事件做出反应，以便在滚动内容时重新定位它等等。除了需要编写大量代码以重新实现“position：relative / position：absolute”给我的免费内容之外，这也需要对我自己的代码进行相当多的重构，所以我宁愿避免它。

我想知道是否有一些简单的技巧我可以应用于我的内部div来告诉它忽略它的容器的“溢出”属性，或者，如果失败了，一个方便的jquery脚本将为我实现复杂的东西场景所以我只需要调用它来获得我想要的效果。

Answer 1

我会说如果不使用JS来计算链接的位置然后显示弹出位置就不可能做到这一点：固定..

问题是你的弹出窗口在一个带有overflow:auto的div里面，而div里面的所有内容都会影响滚动，所以为了显示弹出窗口，你需要将它带到div之外，这是我唯一的方法知道这样做是通过使用position：fixed ...（或者在弹出窗口中使用position：absolute，以及包含位置的包装div：包含文本和弹出窗口的relative）

所以我会提出3个解决方案：

使用滚动将弹出窗口放在div之外，并在用户点击时在链接上，显示弹出窗口
计算链接（x，y）的确切位置，并使用position：fixed和坐标
使用一个漂亮且易于使用的“消息框”（例如http://csscody.com/demo/wp-content/demo/popup/demo.htm）我知道这不是你想要的，但是......我的想法已经用完= D

我希望这会有所帮助

Answer 2

使用“overflow：auto”，“overflow：scroll”或“overflow：hidden”在div中显示弹出窗口将始终产生此类问题。根据规则，在所有这些情况下，元素子元素不能显示在父元素的边界之外，因为overflow属性恰恰就是这样。在弹出窗口中使用“ position：fixed ”将解决您的问题但是如果向下滚动，您将看到弹出窗口如何在滚动事件之前的旧位置显示。要解决这个问题，您可以使用JQuery，如下所示：

$(".your-popup-PARENT-class").live( {
    mouseenter: function(event) {
        event.stopPropagation();
        var position = $(this).offset();
        $(this).find(".your-popup-class").css("top", (position.top + 30) );
        $(this).find(".your-popup-class").css("left", position.left);
        $(this).find(".your-popup-class").css("display", "inherit");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".your-popup-class").css("display", "none");
    }
});

此代码段在DOM树上找到您的弹出父元素，保存当前位置并将弹出窗口显示在父级的相同位置。如您所见，您可以添加或删除所需的像素（以前的CSS顶部定义中的粗体代码）。

希望这对于遇到此类问题的其他人来说很有用。

亲切的问候！

Answer 3

我不确定你想要的效果是什么，但是如果你删除弹出窗口的容器，那么弹出窗口将显示在可滚动的div之外。

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
    <div id="popup"
         style="display:none; position:absolute; width:150px; height:150px">
      ... more content. This div gets shown and hidden by jquery on click events.
    </div>
</div>

Answer 4

我对此没有答案，但如果您找到好的答案，我很乐意听到。我有一个非常相似的问题（我有一个选项列表供用户选择以修改滚动部分中的项目。如果我靠近列表底部，它看起来不太好。

是否有可能有一个突然出现溢出的弹出式div：滚动或溢出：自动容器？

4 个答案: