Question

我正在研究简化的垂直视差（类似于http://nikebetterworld.com）。

我有一个quick demo working - 代码在技术上有效，但是每次滚动后我都会对重画产生一种紧张的影响 - 好像javascript发生的时间太晚了。知道为什么吗？我在剧本中看不到任何真正突出的东西。

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosition(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

Answer 1

看起来图像被移动了两次 - 首先是浏览器滚动，然后是scroll()处理程序。因此抖动。

通过对图像使用position:fixed或background-attachment:fixed，您可能会获得更清晰的效果 - 这样它们不会受到浏览器滚动的影响，但会被scroll()处理程序移动。你将不再有一个与另一个战斗的效果。您必须相应地修改scroll()处理程序。

Answer 2

您应该检查是否过于频繁地调用滚动回调。如果是这种情况，您可以尝试使用setInterval来限制重新渲染次数：

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250); //in miliseconds

滚动垂直视差

2 个答案: