Question

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

似乎导致跳跃的是：

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

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

此外，在第一个滚动条上，右侧列向上跳了三个框 - 也是因为“half_way”，我可以通过给它一个“bottom: -600px;”来修复

完整代码：

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">的内容来操纵它们，然后将它们替换为＆lt; div＆gt ;.

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

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相对较慢，因此存储引用可以提高性能/减少闪烁。

存储对象也使代码更易于理解（imho），因为您可以轻松地看到您引用相同的东西，而不是可能不同的东西。

Answer 2

我仍然在使用Danack解决方案的窗户上闪烁铬色。对于这个网站，我会控制所有滚动（你已经手动滚动其中一个边），并给出元素的绝对位置。

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

Answer 3

这可能是一个很长的镜头，但在使用infinitescroll时，我有同样的闪烁，并最终使用imagesLoaded。我最后添加了淡入的附加图像（现已加载），并且因为它们被加载而阻止它们闪烁。

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

Answer 4

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

我接下来的步骤是：

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

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

内容在无限滚动/循环上闪烁/跳跃

4 个答案: