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

Question

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

我试过设置：

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

但这似乎可以在两个方向上滚动。

我如何防止这种情况？

https://jsfiddle.net/64tw8rqe/

---

CSS 溢出-x的答案：可见； 和溢出-y：隐藏； 导致滚动条问题解释了潜在的问题，但不是在scroll的情况下的解决方法。

---

此行为符合规范。 我正在寻找变通办法。

Answer 1

问题是overflow-x: visible; overflow-y: scroll 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;
}

小提琴：

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

相信这里发现的技巧： http ： //front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

Answer 2

当您有垂直溢出时，滚动条将添加到水平流（右侧）。 元素不会覆盖该滚动条，因此浏览器会将溢出设置更改为水平滚动。

您需要做的是在所有内容周围添加另一个容器，并将其设置为具有更大的宽度，使得内部元素和垂直滚动的高度内的所有溢出内容：

HTML

<div class='container3'><!-- Add a parent container -->
  <div class='container'>
    ...
  </div>
</div>

CSS

/* A parent container */
.container3 {
  /* The maximum height of your inner content before scrolling is enabled */
  height: 200px;

  /* Enable the vertical scroll if we have enough content */
  overflow-y: auto;
}

小提琴

https://jsfiddle.net/cL8hr7ot/

Answer 3

这是因为您使用了“pre”，它在某些浏览器上有一些默认值：

    pre {
       display: block;
       font-family: monospace;
       white-space: pre;
       margin: 1em 0;
    }

您有两个选择：将所有“pre”更改为“p”（段落）或重写pre的white-space属性，方法是添加：

    pre { white-space: normal; }

Answer 4

不确定其他地方是否有更好的答案，但我确实为这个问题提出了一个非常脆弱/笨拙的解决方案。 它在我的例子中使用了一些神奇的数字，但我认为这可能是未来更好答案的起点。

这个解决方案归结为使用position: absolute; 在要overflow: visible的项目上没有top 、 right 、 bottom或left任何值overflow: visible并将其父项设置为overflow: scroll; .

没有任何绝对值的绝对定位元素的默认行为介于我希望它所处的静态和绝对定位世界之间。

代码笔

代码笔

HTML

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item" id="dropdown">
      Hover me
      <div class="menu">Menu</div>
    </div>
  </div>
</div>

CSS

.wrapper {
  background: blue;
  height: 64px;
  width: 250px;
  padding: 2px;
}

.inner-wrapper {
  overflow-x: scroll;
  display: flex;
  height: 100%;
}

.item {
  background: white;
  margin-right: 2px;
  width: 60px;
  height: 100%;
  flex-shrink: 0;
}

#dropdown .menu {
  background: pink;
  height: 0px;
  position: absolute;
  display: none;
}

#dropdown:hover .menu {
  height: 100px;
  z-index: 1;
  display: block;
  margin-left: -58px;
}

我在Twitter 上发布了一个关于我试图解决的问题的小视频剪辑

Answer 5

尝试更改overflow-y：hidden