Question

我已经看到了一个非常好的效果，我想尝试为我自己的项目重现，但我很难看到在性能和绝对无缝操作方面实现它的最佳方法。

效果是连续/循环播放的内容，可以无限制地向任何方向滚动和平移，看起来完全无缝。它可以在Android屡获殊荣的Leap：Second网站上看到：http://leapsecond2015.com/。

我可以想到几种方法来实现这一目标;一种方法是克隆内容正文并在页面加载时在所有方向上重复一次，当滚动/平移时，在用户移动的方向上添加更多克隆内容。

我对这种方法不理解的是性能，因为我还没有在我的任何项目中使用。clone()。让我们说用户连续向下滚动5分钟，只是为了好玩，克隆了10,000次 - 克隆这么多内容的缺点是什么？

我看到的另一种方法是在用户到达内容结尾时将滚动条重置回到开头。有点像这个演示：

var bgHeight = 1600; // pixel height of background image

$(document).ready(function() {   
    $('body').height( bgHeight + $(window).height() );
    $(window).scroll(function() {
        if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
            $(window).scrollTop(1);
        }
        else if ( $(window).scrollTop() == 0 ) {
            $(window).scrollTop($('body').height() - $(window).height() -1);
        }    
    });
});
$(window).r

body {
    height: 1600px;
    background-image: url("");
    background-p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

同样，当我向其添加水平滚动功能但垂直看起来很棒时，我很难看到它如何无缝地工作。

我想知道这些方法中的哪一个会表现得更好，或者如果它们都不合适，请就Android如何在Leap：Second网站上实现它或建议新方法提供建议。

我在这个主题上有一个不错的Google，但却被'inifinte scrolling'文章所淹没，并且打了一个砖墙。我看了一下Firefox上的元素检查，我想我得出的结论是他们没有克隆和追加，但也许我错了。

Answer 1

首先，通过使用CSS重复背景和极少量的javascript，您可以以非常小的处理器成本实现无限滚动背景：

window.scroll(1800,1800);

function resetWindow() {

    if (window.pageXOffset < 900) {
    window.scrollBy(900,0);
    }

    if (window.pageXOffset > 2700) {
    window.scrollBy(-900,0);
    }

    if (window.pageYOffset < 900) {
    window.scrollBy(0,900);
    }

    if (window.pageYOffset > 2700) {
    window.scrollBy(0,-900);
    }
}

window.addEventListener('scroll',resetWindow,false);

body {
width: 3600px;
height: 3600px;
background-image: url('http://1-background.com/images/stars-1/star-space-tile.jpg');
background-size: 300px 300px;
background-repeat: repeat;
}

正如您所看到的，窗口根本无法无限滚动。相反，窗口（仅3600px x 3600px）会不断修正自己的位置，因此只有看起来好像无限滚动。

添加内容稍微复杂一些，但只要元素模式在2维中重复（可预测），就可以采用相同的原则：使用scrollBy()来获取滚动条返回到较早的视口位置，该位置看起来与用户即将进入的视口相同。

对于涉及更随机的元素分布的更复杂的场景，而不是cloning元素，我很想用insertBefore();替换已经存在的元素，这样一个元素就是（比如）{{在视口下方移动1}}，移动视口右侧的300px，现在900px位于视口上方，600px位于视口左侧。

这将在所有四个方向上实现看似无限的运动（以及在看似无限的场上随机分布元素），而不增加文档中元素的数量。

Answer 2

看起来http://leapsecond2015.com/使用http://www.pixijs.com/来处理加载＆＃34;无限＆＃34;图像/项目数量

Answer 3

花了一段时间，但我想我终于发现了大部分用于这种酷炫效果的Android方法。

正如@Kootsj所指出的，Leap：Second网站使用PIXI-js - 一个webGL /画布，二维渲染库，主要用于游戏。在查看替代库之后，可以使用任何游戏/渲染引擎来实现相同的结果。

他们使用渲染库以智能的网格状布局将各个图像绘制到画布上。然后，他们使用PIXI在滚动，鼠标，触摸和拖动事件上对画布进行动画/转换 - 以获得最终的平滑度。

更多地研究PIXI，＆＃39;画布缓存＆＃39;和场景缓冲＆＃39;是可能的。知道了这一点，我想象他们正在缓存/克隆图像板，并以某种方式将其粘贴到用户正在焚烧/平移的方向上，但是因为它已经缓存了#c;或者＆＃39;缓冲＆＃39;，它表现得非常好。我仍然没有100％他们如何实现丰富的平移功能，但似乎这可能很接近。

他们的脚本包含20,500多行Javscript，非常类似于游戏的架构。它会采取一些认真的努力来达到与匹配性能类似的效果，但会尝试。

如果我对这个功能有更多了解或想出一个有效的例子，我会用我的发现更新这个答案。

所有方向的连续，循环，可滚动内容

3 个答案: