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

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]]
<-------------->

这会无限期地进行 - 每次单击最终图像时，前面的图像都应滚动到左侧，将新图像放置在 DIV 内的最右侧视图中。

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

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

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

2）下面的CSS“做”做我想要的（有点） - 它从DIV的左侧开始，然后工作到715px标记并开始将图像（向后）推到左侧并移出视图 - 总是将最近的图像留在 DIV 的最右侧并在视图中。问题在于订单被翻转（我认为，由于 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

我做了一个演示页面。它在 Firefox、Safari、Opera 和 IE 8 上运行良好。

它实际上是JS解决方案。魔术在这里：

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

Answer 2

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

unicode-bidi：双向覆盖。

这是 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

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

[ [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

希望对您有所帮助，如果我解释得不够多，请告诉我...

Answer 4

对IE使用特定的 CSS，就像 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 5

您可以尝试不使用direction:rtl.
然后在添加图像的 javascript 中，计算新图像的位置并scrollLeft在滚动 div 上设置：

scroll.scrollLeft = theNewImagePosition ;

Answer 6

你的滚动 div 中的另一个 div 有一个左浮动呢？没有尝试过，但我想它会起作用。

Answer 7

好的，我让它在 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 8

像这样的工作：

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

不确定它在 ie 中是如何工作的，但您可以在条件注释中加载代码 sherpa 的解决方案

Answer 9

#scroll img {float:left}