Question

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

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

滚动条在滚动条内加载一个图像宽度：715px;

[[1]]

当用户点击该图像时，第二个图像是动态的附在第一个：

[[1] [2]]

而且，当点击第二个时，会发生同样的事情（依此类推）：

[[1] [2] [3]]

现在，我需要一些帮助。当最后的可见图像在单击该系列，前面的图像应该滚动到左边为新的一个腾出空间，把第一个放出去视图并将新图像放在最后：

[[2] [3] [4]]
＆LT; --------------＆GT;

这无限期地继续 - 每次点击最终图像时前面的那些应该向左滚动，将新图像放在 DIV中最右边的视图。

[[3] [4] [5]]
＆LT; --------------＆GT;

我玩过下面的CSS（你看到的是我的状态最近的尝试）。我能够实现的目标是：

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

2）下面的CSS“做”做我想要的（有点） - 它从左边开始 DIV然后工作到715px标记并开始推动图像（向后）在左侧和视野之外 - 始终保留最新图像在DIV的最右边，在视野中。这个问题是订单是FLIPPED（我认为，由于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;

Answer 2

谢谢大家，我终于得到了答案（我必须将“Ben C”归功于此）。诀窍（对我而言）：

unicode-bidi：bidi-override。

这是HTML（带有测试脚本）：

<script type="text/javascript">
var interval = null;
var count = 10;

function addImage()
{
    var container = document.getElementById("imgContainer");
    var img = document.createElement("img");
    img.setAttribute("src", "flowers-100.png");
    container.appendChild(img);

    if (--count == 0) clearInterval(interval);
}

function main()
{
    interval = setInterval("addImage()", 2000);
}

window.onload = main;
        </script>
        <style type="text/css">
            div
            {
                white-space: nowrap;
                overflow: scroll;
                direction: rtl;
                border: 2px solid blue;
                width: 600px;
                height: 110px;
                text-align: left;
            }
            div span
            {
                direction: ltr;
                unicode-bidi: bidi-override;
            }
            img
            {
                margin-right: 10px;
            }
        </style>

以下是实施的链接：

http://www.tidraso.co.uk/misc/imgContainer/

Answer 3

你的滚动div中的另一个div怎么样还有一个浮动？没有试过，但我想它会起作用。

Answer 4

好的，我让它在IE中工作，但不是Firefox：

#container
{
    width: 715px;
    height: 228px;
    border: solid 3px purple;
    overflow:auto;
}
#scroll
{
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red;
}

那里的任何CSS大师都知道如何使它适用于两者？

Answer 5

会像这样工作：

#container{overflow:hidden;}
#scroll {float:right;min-width:715px;}

不确定它是如何工作的，但你可以在条件评论中加载代码sherpa的解决方案

Answer 6

像CSS中的其他所有内容一样使用 IE 的特定CSS，例如：

#scroll {
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red; min-width:715px;
}
* html #scroll
{
    min-width: auto;
}

Answer 7

#scroll img {float:left}

Answer 8

您可以在没有direction:rtl的情况下尝试首次尝试然后在添加图像的javascript中，计算新图像的位置并在滚动div上设置scrollLeft：

scroll.scrollLeft = theNewImagePosition ;

Answer 9

我为一个项目做了这个，这就是我做的。

[ [img1] [img2] [img3] ]

包裹这些图像的外部DIV的宽度等于所有图像的宽度（包括边距等）。

然后'left'的css属性用于将行向左移动：

left: -100px;
overflow: hidden; /* up to you if you need this */

它向左移动的值，例如：

width_of_all_images_plus_margins - width_of_display_area

希望有所帮助，如果我没有充分解释，请告诉我......

非常棘手的CSS滚动问题

9 个答案: