无限滚动/循环上的内容闪烁/跳转

Question

我正在寻找帮助/指向正确方向的点/或在循环/无限网站上滚动时出现闪烁/跳转的解决方案，可以在 this fiddle 中看到。

似乎是什么导致了跳跃：

“$(window).scrollTop(half_way - child_height);”，也可能是 Chrome 窗口的 scrollTop 错误，但目前所有浏览器都在发生。

如果我删除“- child_height”，则不再有闪烁但页面不再正确滚动，这可以在this fiddle 中看到。

此外，在第一次滚动时，右侧的列向上跳了三个框 - 也是因为“half_way”，我可以通过给它一个“bottom: -600px;”来解决这个问题

完整代码：

http://jsfiddle.net/djsbaker/j3d8r/1/

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);

function crisscross() {
    $('#up-left').css('bottom', '-' + window.scrollY + 'px');
    $('#down-right').css('bottom', '-' + window.scrollY + 'px');
    var firstLeft = $('#up-left').children().first();
    var lastLeft = $('#up-left').children().last();
    var lastRight = $('#down-right').children().last();
    var firstRight = $('#down-right').children().first();

    if (window.scrollY > half_way ) {

        $(window).scrollTop(half_way - child_height);
        lastRight.appendTo('#up-left');
        firstLeft.prependTo('#down-right');

    } else if (window.scrollY < half_way - child_height) {

        $(window).scrollTop(half_way);
        lastLeft.appendTo('#down-right');
        firstRight.prependTo('#up-left');
    }
}

$(window).scroll(crisscross);

Answer 1

好的 - 这是一个'working' version - 我的意思是它比以前更不闪烁。我以为它没有闪烁，那是在我使用电池供电的时候，但插入电源并且 CPU 速度足够快，可以闪烁。

正如我所提到的，要消除闪烁，您需要克隆对象、操作它们然后将它们替换到 DOM 中，而不是直接操作 DOM。

我通过获取<div id="content"> 的内容来操作它们，然后将它们替换到那个

中。

另外，最好只在 DOM 中查找一次，然后使用对该对象的引用而不是重复搜索。例如

var leftSide = $(clone).find('.up-left');
....
lastRight.appendTo(leftSide);
....
 $(leftSide).css('bottom', '-' + window.scrollY + 'px');

而不是：

lastRight.appendTo('#up-left');
$('#up-left').css('bottom', '-' + window.scrollY + 'px');

搜索 DOM 相对较慢，因此存储引用可以提高性能/减少闪烁。

存储对象还使代码更易于理解（恕我直言），因为您可以轻松地看到您引用的是同一事物，而不是可能不同的事物。

Answer 2

我仍然在使用 Danack 解决方案的 Windows 上的 chrome 中闪烁。对于这个站点，我将控制所有滚动（您已经手动滚动一侧），并为元素提供绝对位置。

或者如果你坚持使用浏览器滚动，可能会使用动画：动画最后一个元素的高度直到 0px 然后使用 appendTo，然后从 0px 动画到正常高度...

Answer 3

这可能是一个很长的镜头，但我在使用无限滚动时也有同样的闪烁， 并最终使用了imagesLoaded。我最终添加了带有淡入的附加图像（现在已加载），并且由于它们已加载，因此它们不会闪烁。

因此，也许通过使用加载的图像 - 或对图像进行回调，您可以解决闪烁问题。虽然它确实降低了速度。我可以想象，如果您想尽快滚动浏览所有内容，这可能不是解决方案。祝你好运！

Answer 4

一种解决方案是不使用本机滚动功能，而是模拟滚动。这可以通过将您的内容的overflow 设置为“隐藏”以及捕获其上的“鼠标滚轮”事件并在调用它时触发一些操作来完成。我开始尝试here（使用 MooTools 而不是 jQuery，因为我更熟悉它）。它目前只是通过更改第一个元素的 margin-top 在左侧“工作”。

我接下来的步骤是：

• 检查第一个元素的负边距顶部是否大于它的高度，如果是，则将其移动到右侧。
• 右侧最后一个框的逻辑相同，底部边距为负。

不过，这有一些缺点。模拟滚动感觉不像原生滚动功能那么自然，并且单击鼠标滚轮不起作用。这些可能是可以解决的，但需要更多的编码才能使其顺利工作。无论如何，最终您将获得一个没有任何闪烁且侧面没有粘性滚动条的解决方案（替换的想法可能是侧面的一个小区域触发鼠标悬停时的滚动）。