如何使弹出窗口溢出：在溢出内可见：自动上下文 [英] how to make a popover overflow: visible inside overflow: auto context

问题描述

我有一个div列表(如果超出父框，则应滚动overflow-x)，并且在悬停时，我希望看到弹出窗口。

我的问题是，如果我悬停任何子div，溢出计算都会考虑弹出窗口，但我只想让它在所有内容的顶部可见，而不是使它扩展滚动区域，也不希望它隐藏在父div的右边界上。我可以以某种方式将其从父/子上下文中分离吗？

.parent {overflow-x: visible}不是一个选项，因为我希望保持父对象的大小，并使子对象可滚动。

div {
  border-style: solid;
  margin: 10px;
}

.parent {
  overflow-x: auto;
  
  white-space : nowrap;
  width: 200px;
  height: 150px;
  background-color: grey;
}

.child {
  position: relative;
  
  display: inline-block;
  width: 70px;
  height: 100px;
  background-color: lightblue;
}

.popover {
  display: none;
  position: absolute;
  left: 30px;
  
  z-index:9999;
  width: 80px;
  height: 50px;
  background-color: lightgreen;
}

.child:hover .popover {
  display: block;
}

<div class="parent">
  <div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div>
</div>

推荐答案

IMHO只要弹出窗口位于带有"；overflow：auto"；、"；overflow：scroll"；或"；overflow：idden"；的div中，您就无法避免使用纯HTMLcss/css试图避免的行为。不过，请找个人帮我纠正一下。

我建议按照我的示例使用最小的JS(JQuery)。这也可以用香草JS来完成，但是我觉得不值得这么做。 基本上，JS做三件事，(1)附加到Mouseenter和Mouseleave事件，(2)在捕获和冒泡阶段停止事件的进一步传播，(3)设置弹出窗口的位置。

这还有一个额外的好处，即可以控制弹出窗口的其他各个方面。

出于完整性考虑，我也创建了一个普通的JS版本，尽管我不会这样做。

https://jsfiddle.net/rq1xc548/

$(".child").on( {
    mouseenter: function(event) {
        event.stopPropagation();
        let position = $(this).offset();
        $(this).find(".popover").css("top", position.top);
        $(this).find(".popover").css("left", position.left-10);
        $(this).find(".popover").css("display", "block");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".popover").css("display", "none");
    }
});

div {
  border-style: solid;
  margin: 10px;
}

.parent {
  overflow-x: auto;
  
  white-space : nowrap;
  width: 200px;
  height: 150px;
  background-color: grey;
}

.child {
  position: relative;
  
  display: inline-block;
  width: 70px;
  height: 100px;
  background-color: lightblue;
}

.popover {
  display: none;
  position: fixed;
  
  z-index:9999;
  width: 80px;
  height: 50px;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div>
</div>

这篇关于如何使弹出窗口溢出：在溢出内可见：自动上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！