html - overflow-x 也隐藏了 overflow-y

Question

有多个这样命名的问题，但我没有找到一个适用于我的情况，所以我在这里:

在这段代码中:

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="child">
    a<br/>
    b<br/>
    hover<br/>
    me
  </div>
</div>

您可以看到当您悬停红色框时应用的 overflow-x 也会隐藏 overflow-y(至少在 Chrome 上)。这很烦人，因为我有一个工具提示，我希望它能够溢出到红色框上方，同时我有一个菜单将从右侧滑动并且应该保持隐藏状态。

这是一个错误吗？有解决方法吗？

Answer 1

你不能改变 overflow-x 和 overflow-y 的行为方式(在 Firefox 和其他浏览器中是一样的)，但是你可以改变你的方式HTML 是有组织的。

将溢出时要隐藏的所有内容放在一个包装器中。将您的工具提示放在另一个包装器中。

这样的东西可能适合您的需要:

#container {
  position: relative;
  width: 400px;
  background: #f77;
  margin: 3em 2em;
}

#child {
  overflow: hidden;
  position: relative;
}

#menu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #dd2;
  transition: .2s;
}

#child:hover #menu {
  transform: translateX(-100%);
}

#tooltip {
  position: absolute;
  bottom: 100%;
}

<div id="container">
  <div id="child">
    hover<br/>
    me
    <div id="menu">
      menu
    </div>
  </div>
  <div id="tooltip">
    a<br/>
    b
  </div>
</div>

---

剪辑行为是错误吗？

不，剪辑是in accordance with the spec .

UAs must clip the scrollable overflow area of scroll containers on theblock-start and inline-start sides of the box (thereby behaving as ifthey had no scrollable overflow on that side).

在您的例子中，“block-start”一侧是顶部，“inline-start”一侧是左侧。这就是为什么您可以将工具提示放在内容下方，它会触发滚动条。

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  /* bottom: 0; */
  top: 0;
}

<div id="container">
  <div id="child">
    hover<br/>
    me<br/>
    a<br/>
    b
  </div>
</div>

那么，为什么可以滚动到框下方溢出的内容，但不能简单地使其可见？原因是当 any overflow 属性设置为 hidden 时, 整个盒子变成了 scroll container .

[A scroll container] allows the user to scroll clipped parts of itsscrollable overflow area into view.