css - 非常棘手的 CSS 滚动问题

Question

我不确定如何在 CSS 中实现某种效果。 我有以下 HTML:

<div id="container" name="container">
    <div id="scroll" name="scroll"></div>
 </div>

滚动条在滚动条内加载一张图像，该图像具有 宽度:715px；

[[1]]

当用户点击该图像时，会动态显示第二张图像 附加到第一个:

[[1][2]]

并且，当单击第二个时，会发生同样的事情(依此类推):

[[1][2][3]]

现在，我需要一些帮助。当最终可见图像在 该系列被点击，前面的图像应该 向左滚动为新的腾出空间，将第一个放在外面 View 并将新图像放在末尾:

[[2][3][4]]
<---------------->

这会无限期地继续下去——每次点击最终图像时 前面的应该向左滚动，将新图像放在 DIV 中最右边的 View 。

[[3][4][5]]
<---------------->

我玩过下面的 CSS(你看到的是我的状态 最近的尝试)。我能够实现的是:

1) 图像连续构建然后溢出(向右) 当第四张图片超过 715px 标记时。不是我想要的。

2) 下面的 CSS“做”了我想要的(某种程度上)——它从左边开始 DIV 然后工作到 715px 标记并开始推送图像(向后) 向左且不可见 - 总是留下最新的图像 在 DIV 的最右侧并在 View 中。问题是 订单被翻转(我认为，由于 RTL)。我试过 用 text-align:left 欺骗它，但这似乎没有做任何事情。

有什么想法吗？建议表示赞赏。谢谢。

#container
{
    width: 715px;
    height: 228px;
    overflow: hidden;
    position:relative;
    / * text-align:left; */
}

#scroll
{
    height: 228px;
    white-space: nowrap;
    direction: rtl;
    /* text-align:left; */

} 

Answer 1

我做了一个 demo page .它适用于 Firefox、Safari、Opera 和 IE 8。

其实就是JS的解决方案。魔术就在这里:

document.getElementById('container').scrollLeft = last_img.offsetLeft;