滚动垂直视差答案

【问题标题】：Scrolling Vertical Parallax滚动垂直视差
【发布时间】：2011-07-26 02:55:57
【问题描述】：

我正在研究简化的垂直视差（类似于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");
  });
});

【问题讨论】：

天哪，这很烦人。我们可以让这种时尚迅速消亡吗？
我在喝醉的时候看了看，这不是一个好主意。

标签： javascript jquery background scroll

【解决方案1】：

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

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

【讨论】：

后台附件：已修复；我什至不知道财产的存在。谢谢！

【解决方案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

【讨论】：

不是这个问题所需要的，但是一个很好的技术。谢谢。
Undersocre.js，您应该考虑将其用于任何重要的 JavaScript 项目，它有一个称为 throttle 的方法。