2

看起来overflow-x并overflow-y没有像我期望的那样表现。如果我设置overflow-x为可见和overflow-y自动，overflow-x则不会表现为可见，而是隐藏。

我错过了什么，还是这是正常的？

这是一个例子。

HTML：

</html
  <body>
    <div class='container'>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
    </div>
  </body>
</html>

CSS：

.container {
  background: rgba(0, 0, 0, 0.1);
  width: 200px;
  height: 100px;

  overflow-y: auto;
  overflow-x: visible;
}

.content {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  margin-left: -14px;
  padding-left: 14px;
}
4

2 回答 2

5

实际上overflow-x会像auto你的例子一样。

有一些overflow-x和的组合overflow-y不能组合，因为它们根本不起作用。您不能让内容在容器内在一个方向上可滚动，而在容器外在另一个方向上可见。

于 2012-07-27T09:38:38.377 回答
3

已编辑：在 OP 提供更多详细信息后：

overflow CSS 属性指定是否剪切内容、渲染滚动条或显示块级元素的溢出内容。

使用具有不同于可见值的溢出属性（其默认值）将创建一个新的块格式化上下文。这在技术上是必要的，就好像浮动会与滚动元素相交，它会强制将可滚动元素的内容重新包装在侵入的浮动周围。重新包装会在每个滚动步骤之后发生，并且会导致滚动体验太慢。请注意，通过以编程方式将 scrollTop 设置为相关的 HTML 元素，即使溢出具有隐藏值，元素也可能需要滚动。

溢出值：

可见： 默认值。内容没有被剪裁，它可能会呈现在内容框之外。

hidden : 内容被剪裁，不提供滚动条。

滚动： 内容被剪切，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出的内容。

auto： 取决于用户代理。如果内容溢出，像 Firefox 这样的桌面浏览器会提供滚动条。

见参考

添加了更多详细信息：

来自：http ://www.brunildo.org/test/Overflowxy2.html

在 Gecko、Safari、Opera 中，当与“隐藏”组合时，“可见”也变为“自动”（换句话说：当与“可见”不同的任何其他内容组合时，“可见”变为“自动”）。Gecko 1.8、Safari 3、Opera 9.5 非常一致。

W3C 规范也说：

'overflow-x' 和 'overflow-y' 的计算值与它们的指定值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是 'scroll'或“自动”，然后“可见”设置为“自动”。如果 'overflow-y' 相同，'overflow' 的计算值等于 'overflow-x' 的计算值；否则它是'overflow-x'和'overflow-y'的一对计算值。

于 2012-07-27T09:33:55.377 回答