如何在 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