使用超出 div 宽度的图像独立滚动 div 列？答案

【问题标题】：Independently scrolling div columns with images that extend beyond div width?使用超出 div 宽度的图像独立滚动 div 列？
【发布时间】：2011-04-04 22:21:39
【问题描述】：

我正在尝试创建一个包含两列独立滚动的图像的页面。我构建了一个简单的两列 div 布局，每列浮动 50% 宽度和 100% 高度。溢出设置为自动，因此内容独立滚动，但比容器宽的图像在 div 内被截断。

有什么方法可以实现这样的效果，即 div 独立滚动并且能够使图像超出容器范围？还是有其他方向可以追求？

谢谢！

-- 编辑：图片以获得更好的解释

我所说的溢出截断的意思是，更宽的图像基本上在滚动条处被截断，我想要实现的可以在这张图片中看到，每一列都可以独立滚动（我想用鼠标轮）：

【问题讨论】：

图像被“截断”是什么意思？使用overflow: auto，你应该也可以水平滚动查看整个图像吗？
溢出是否也会发生：也可以滚动？

标签： html css scroll

【解决方案1】：

您认为可行的答案是：

overflow-x: visible;
overflow-y: scroll; /* or auto */

但这似乎不像您想/希望的那样运作。有关所有可能的溢出 x/y 组合的网格，请参阅此页面：

http://www.brunildo.org/test/Overflowxy2.html

所以 - 我相信答案是你必须：

1) give each box a height
2) give each box overflow-y:scroll; /* or auto */
3) use css positioning to place the boxes where you want

这应该 a) 将框放在正确的位置，但是 b) 允许它们并排并排而不需要设置宽度，并且不需要浮动（如果没有设置宽度，您将无法获得一致的结果在这种情况下）

这也将使每个框自动适应图像的宽度，因此它们不会被水平切断，但仍会垂直滚动。

【讨论】：

谢谢！我应该使用绝对定位吗？我正在尝试的许多组合都没有给我适当的效果。你是对的，我希望使用溢出-x：可见，但它也不起作用。我在不使用浮点数/宽度的情况下发现的问题是 div 占据了整个宽度并将右列向下推到左下方。
@waffl - 是的，如果您绝对定位每个图像容器框，它们将恰好位于您想要它们的位置，并且根据我上面的答案中的信息，它们将 a) 能够滚动垂直，但 b) 不会被水平切断。
OK 太好了，最后，有什么办法可以让滚动条不可见？
@waffl - 不是 CSS - 你可以使用 Javascript - 这个问题已经在这里得到了回答：stackoverflow.com/questions/4963219/hiding-a-scrollbar-in-a-div