滾動垂直視差

Question

我正在研究簡化的垂直視差（類似於http://nikebetterworld.com ）。

我有一個快速的演示工作 - 代碼在技術上有效，但我在每個滾動后對重繪有一個緊張的影響 - 似乎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為圖像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