Question

我正在尝试使用window.onscroll和scrollTop创建一个视差效果但是我一直遇到渲染问题，看起来我在渲染视口后收到了onscroll。正如您所看到的from this example（附带代码），框的移动不稳定且不连贯。

在所有基于WebKit的浏览器和FireFox中，行为都是相同的。

的JavaScript

$(document).ready(function() {
  $('.box').each(function() {
    $(this).data('y', $(this).offset().top);
  });
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();

  $('.box').each(function() {
    var parallax = $(this).data('parallax');

    if (parallax) {
      var y = $(this).data('y');
      var offset = (scroll - y) * parallax;

      $(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
    }
  });
});

标记

<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>

Answer 1

只是想知道是否值得使用预制车而不是“重新发明”车轮？

http://joelb.me/scrollpath/

渲染具有视差效果的问题

1 个答案: