使用无限滚动使图像重复Y

Question

有没有可能使一个图像repeat y (向下)，只要用户不断滚动它不断重复？

我知道重复和图像x或y是可能的，但是图像会在浏览器的末尾停止。只要你继续向下滚动，我就会让它继续下去。

如果可能，最好是CSS或HTML

到目前为止，这就是我所要做的，我只需要知道如何让div无限量地运行：

CSS：

.slide {
    width:30px;
    height:1000px;
    background-image:url(http://paulbourke.net/fractals/noise/noise2d.gif);
    background-repeat:repeat-y;
    margin:0 auto;
}

HTML：

<div class="slide"></div>

Fiddle

Answer 1

创建高度不受限制的HTML元素可能是不可能的。但是，当用户滚动到接近底部时，您可以使用javascript来展开元素。

Answer 2

对于纯HTML来说，这(理论上)是不可能的，因为你可以定义一个绝对高度和最小/最大高度值，或者简单地使用"auto“，它会根据你内容的大小自动调整框的高度。

另一种(理论上无限滚动)可以通过给出一个可笑的高分辨率高度来实现，比如100000px;，但这当然不适合浏览器。

你需要一些Ajax来响应滚动条到达底部，然后将一些内容“附加”到用户在技术上看不见的框中。

你可以构造类似这样的东西：

$(window).scroll(function () {
    //- 10 = desired pixel distance from the bottom of the page while scrolling)
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#myBoxId");
        //Just append some content here
        box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
    }
});

这样，您至少可以模拟一些内容，这些内容只有在用户滚动到末尾时才会扩展(或者使其有用并使用Ajax加载一些内容/然而……)

当然，使用repeat-y重复的图像也会因此效果而扩展。