8

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

似乎导致跳跃的原因是：

" $(window).scrollTop(half_way - child_height);"，也可能是 Chrome windows 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);
4

4 回答 4

5

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

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

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

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

存储对象还使代码更容易理解（恕我直言），因为您可以很容易地看到您引用的是相同的东西，而不是可能不同的东西。

于 2013-02-02T01:04:37.173 回答
1

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

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

于 2013-02-02T02:05:54.980 回答
1

这可能是一个很长的镜头，但是在使用无限滚动时我有同样的闪烁，最终使用了imagesLoaded。我最终附加了带有淡入的附加图像（现在已加载），并且因为事实而防止它们闪烁他们被装载了。

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

于 2013-02-04T15:11:26.980 回答
1

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

我接下来的步骤是：

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

This has some downsides, though. Simulating scrolling doesn't feel as natural as the native scrolling functionality and clicking the mousewheel doesn't work. These might be solveable but it would require some more coding to get it to work smoothly. Anyway, in the end you would have a solution without any flickering and with no sticky scrollbar at the side (An idea for a replacement could be a small area on the side that triggers the scrolling on mouseover).

于 2013-02-06T23:08:38.513 回答