Question

我有一个想法，就像一个固定的框架，大约800px宽的固定框架，一个视差城市，广告牌上的内容间隔开，所以当你在它们之间滚动时，它允许视差看起来像公共汽车正在移动。内容将像精灵一样大于窗口，我将提前和后退按钮滚动（x金额，0）。我有一个工作的视差脚本和3层粗糙的城市景观都很好。

我撞墙了。我想在滚动1000px之后清除scrollBy动画。然后你再次点击它，它再转1000px。这是我的功能。

function scrollForward() {
    window.scrollBy(5,0);
    scrollLoop = setInterval('scrollForward()',10);
}

到目前为止，我只能在达到1000时清除它。我尝试做1000 || 2000年，但在第一个之后它变得非常快，并且不会清楚。

Answer 1

不太清楚你在这里问什么。也许你可以提供更相关的代码？

我确实发现您的代码存在潜在问题。您拨打setInterval('scrollForward()', 10)，这将导致每10毫秒调用scrollForward。但是，对scrollForward的每次调用都会为scrollForward创建更多间隔，从而产生一种递归爆炸。您可能希望使用setTimeout或在此函数之外创建间隔。

另外，您可以将代码更改为：setInterval(scrollForward, 10)。删除引号和parens使它更容易阅读和经理。你甚至可以使用复杂的lambda函数，如：

setInterval(function() {
   scrollForward();
   // do something else
 }, 10);

修改因此，如果您知道scrollForward移动项目10px，并且您希望它在移动项目1000px后停止，那么您只需要停止它已移动那么多。我仍然不知道你的代码是如何实际构造的，但它可能看起来像下面这样：

(function() { var moved_by = 0; var interval = null; var scrollForward = function() { // move by 10px moved_by += 10; if (moved_by === 1000 && interval !== null) { clearInterval(interval); } }; var interval = setInterval(scrollForward, 10); })();

如果要在1000或2000之后清除它，只需相应地调整if语句即可。我希望有所帮助。

Answer 2

Excelsior https://stackoverflow.com/users/66580/majid-fouladpour为其他人写了一段很棒的代码，提出了不同的问题。这对另一个人想要的东西不太合适，但它对我来说是完美的。

function scrollForward() {
    var scrolledSoFar = 0;
    var scrollStep = 75;
    var scrollEnd  = 1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
    }, 10);
}

function scrollBack() {
    var scrolledSoFar = 0;
    var scrollStep = -75;
    var scrollEnd  = -1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar <= scrollEnd ) clearInterval(timerID);
    }, 10);
}

现在为第二步找出如何将这个内容动画放在框架后面。

溢出：隐藏;图像scrollBy

2 个答案: