将overflow-x设置为auto时将overflow-y设置为可见，以便内容可以垂直溢出parent的容器

问题描述

我正在使用位置：绝对和位置：相对在图像上显示文本（如果其父对象是悬停。父div的文本和图像所在的容器设置为 overflow-x：auto ，从而使其具有水平滚动条。

I'm using position: absolute and position: relative to display text over an image if its parent is hovered over. The container that the text and images parent div is in is set to overflow-x: auto, causing it to have a horizontal scrollbar.

我希望显示的文本在垂直方向上溢出 #container 元素（和水平滚动条），但这不是发生-而是在容器中出现了垂直滚动条。

I want the text that appears to vertically overflow the #container element (and the horizontal scrollbar), but this is not happening - instead, a vertical scrollbar is appearing in the container.

我不希望容器的高度扩展到文本的高度。

I do not want the containers height to expand to the height of the text.

我尝试过将 overflow-y：visible 应用于 #container ，但这不能解决问题。如果我从 #container 中删除​​ overflow-x：auto ，它可以解决问题，但从<$中删除水平滚动条c $ c> #container 并放在 body （我不想要）上

I've tried applying overflow-y: visible to #container but this hasn't resolved the problem. If I remove overflow-x: auto from #container it fixes the problem, but removes the horizontal scrollbar from #container and puts it on body (which I don't want)

function textVisibility(name) {
  var p = document.getElementById(name);
  if (p.style.display == "block") {
    p.style.display = "none";
  } else {
    p.style.display = "block";
  }
}

.div {
  margin: 5px;
  flex: 0 0 100px;
  position: relative;
}

img {
  width: 70%;
}

p {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
}

<div id="container">

  <div class="div" onmouseenter="textVisibility(1);" onmouseleave="textVisibility(1)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="1">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(2);" onmouseleave="textVisibility(2)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="2">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(3);" onmouseleave="textVisibility(3)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="3">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(4);" onmouseleave="textVisibility(4)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="4">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(5);" onmouseleave="textVisibility(5)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="5">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(6);" onmouseleave="textVisibility(6)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="6">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>

JsFiddle：

JsFiddle: https://jsfiddle.net/r3Lja69h/

推荐答案

考虑使用 position：fixed 并在悬停时动态调整位置：

Consider the use of position:fixed and adjust the position dynamically on hover:

document.querySelectorAll('.div').forEach((div) => {
  div.addEventListener('mouseover', () => {
      var r = div.getBoundingClientRect();
      div.style.setProperty("--t", r.top+"px");
      div.style.setProperty("--l", r.left+"px");
      div.style.setProperty("--w", r.width+"px");
  });
});

.div {
  margin: 5px;
  flex: 0 0 100px;
  text-align:center;
  border:1px solid;
}

img {
  width: 70%;
}

p {
  margin: 0;
  position: fixed;
  top: var(--t,0);
  left:var(--l,0);
  width:var(--w,0);
  display:none;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.div:hover p {
  display:block;
}

<div id="container">

  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>

</div>

这篇关于将overflow-x设置为auto时将overflow-y设置为可见，以便内容可以垂直溢出parent的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！