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（理论上）这是不可能的，因为您可以定义绝对高度和最小/最大高度值，或者只使用“自动”，这将根据内容的大小自动调整框高度。

另一个（理论无限滚动）可以通过给出像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加载某些内容/但是......）

当然，重复y重复的图像也将通过这种效果扩展。

使图像重复Y无限滚动

2 个答案: