如何在 CSS 中结合溢出：可见和溢出：滚动？答案

【问题标题】：How to combine overflow:visible and overflow:scroll in CSS?如何在 CSS 中结合溢出：可见和溢出：滚动？
【发布时间】：2014-08-05 11:56:55
【问题描述】：

我正在处理具有水平滚动和多列的页面。文本的第一列应该在页面的中心，其他列也应该是可见的。这是一个草图，它展示了我现在所拥有的——一篇带有可滚动列的文章：jsfiddle。我也想看看溢出的文字。我知道overflow-y:visible 和overflow-y:scroll 不能合并，但是如何实现类似的呢？

只有文本（文章）可以滚动，而不是整个页面。

这里有一些图片说明了我想做的事情：

【问题讨论】：

你不能将这两者结合起来，一个会自动触发另一个。此外，你寻找可见的和滚动相同的方向，不是吗？
我知道，我无法将这两者结合起来，但我正在寻找能产生类似结果的东西——滚动可见溢出。

标签： css overflow multiple-columns horizontal-scrolling

【解决方案1】：

不太确定您在寻找什么，但这里有一个带有显示和文本缩进的提示：

DEMO

CSS 来展示想法：

.article-wrapper {
  border:solid;
  width:600px;
  margin:auto;
  text-indent:0;
  transition:1s
}
.article-wrapper:hover {
  text-indent:-500px;;
}
article {
  text-indent:0;
  display:inline-block;
  height:400px;
  width:500px;
  column-width:500px;
}

如果需要这种效果，您可以通过过渡、动画或 javaScript 寻找一种方法来控制它。

【讨论】：

这行不通，因为我有多个（多于两个）列并且滚动应该手动完成。但是文本缩进的想法很有趣。
@Pwdr 如果您将指针事件和更大的文本缩进结合起来，也许这会提供更多的想法：codepen.io/gc-nomade/pen/KJEic，在这里您可以做什么（使用图像但可以是列）等等高效 codepen.io/gc-nomade/pen/ActpB 您需要从 javascript 中检索宽度以设置文本缩进值或边距或翻译，无论您要支持什么技术
感谢您的帮助！你对text-indent 的想法让我想到了padding——这基本上是我想要的，唯一的问题是，最后一列不能滚动到起始位置（第一篇文章中的最后一张图片），所以padding-right 似乎不要在那里工作。 new jsFiddle
@Pwdr 正如我所建议的，您需要检索元素的宽度以获得它的宽度并将正确的值设置为负文本缩进（或边距...）。检查使用 ul 的滚动宽度而不是宽度的地方 :) codepen.io/gc-nomade/pen/KJzLD 注意更新/插入规则的方式。