将溢出-x设置为自动时将溢出-y设置为可见，以便内容可以垂直溢出父容器

时间：2020-03-24 14:14:15

标签： javascript html css overflow

如果父图像悬停在图像上，我正在使用position: absolute和position: relative在图像上显示文本。文本和图像父div所在的容器设置为overflow-x: auto，从而使其具有水平滚动条。

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

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

我尝试将overflow-y: visible应用于#container，但这并不能解决问题。如果我从overflow-x: auto中删除#container，则可以解决问题，但是从#container中删除水平滚动条，然后将其放在body上（不需要）

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：https://jsfiddle.net/r3Lja69h/

3 个答案:

答案 0 :(得分：2)

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

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>

答案 1 :(得分：1)

如果overflow-x或overflow-y属性既不是visible也不是clip，则visible / clip的计算方式为{{1} } / auto。

也就是说，如果您指定hidden，则overflow-x: auto;属性也将是overflow-y（因为默认值为auto）。

3。滚动和剪切溢出：overflow-x，overflow-y和溢出属性 ref

按指定的方式进行操作，除非可见/剪切计算自动（或分别隐藏）（如果overflow-x或overflow-y既不可见也不剪辑）

一种解决方案是使图像而不是文本成为绝对位置，以便文本确定容器的高度。

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

img {
  width: 70%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

p {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

答案 2 :(得分：-1)

如果要隐藏X轴滚动和Y轴隐藏，而不要编写：-

overflow-x: auto;
overflow-y: hidden;

如果要隐藏Y轴滚动和X轴，而不要编写：-

overflow-x: hidden;
overflow-y: auto;

如果要使所有Axis滚动而不是编写：-

overflow:auto;

所有轴均隐藏于：-

overflow: hidden;
相关问题
最新问题