html - 如何在 CSS 中仅在一个方向上启用滚动？

Question

我有一个包含一些调整大小元素的列表。调整元素大小时，它们应该在 x 方向溢出容器。永远不应该在 x 方向上滚动。应在 y 方向启用滚动。

我试过设置:

overflow-x: visible;
overflow-y: scroll;

但这似乎可以双向滚动。

我该如何防止这种情况发生？

https://jsfiddle.net/64tw8rqe/

---

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue 的答案解释根本问题，但不是 scroll 情况下的变通方法。

---

此行为符合 the spec .我正在寻找解决方法。

Answer 1

问题是 overflow-x: visible; overflow-y: scroll 在 CSS 中是不可能的组合。每当 visible 与 scroll 配对时，它都会转换为 auto。

换句话说，它们是等价的:

overflow-x: visible;
overflow-y: scroll;

overflow-x: auto;
overflow-y: scroll;

也许这对规范来说是一个糟糕的决定，但有变通办法。

通过使扩展元素position: absolute，它们的大小不会改变容器，也不会被overflow: hidden裁剪。为了让它们正确定位，一个带有 position: relative 的额外 div 被包裹在整个容器周围。

HTML:

<div class='container1'>
  <div class='container2'>
    <ul class='messages'>
      <li><pre>Hello</pre></li>
      <li>
        <pre>This is a 
      really really really 
      really really long message.</pre>
      </li>
      <li><pre>World</pre></li>
    </ul>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

.container1 {
  position: relative; 
  width: 200px;
}

.container2 {
  background: #f0f;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.messages {
  overflow: visible;
  list-style: none;
}

.messages li {
  background: #ff0;
  width: 100%;
  height: 24px;
  margin-top: 12px;
}

.messages li pre {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-height: 24px;
  padding: 4px;
  background: #0ff;
  border-radius: 4px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  min-width: 100%;
  max-width: 100%;
  transition: max-width 200ms ease-out, height 200ms ease-out;
}

.messages li pre:hover {
  z-index: 1;
  background: #00f;
  max-width: 80vw;
  max-height: 80vh;
  transition: max-width 200ms ease-in, max-height 200ms ease-in;
}

fiddle :https://jsfiddle.net/cyL6tc2k/2/

感谢此处发现的技巧:http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent