视差效果跳跃

Question

我的网站上有视差效果，但在滚动时，它看起来相当跳跃如下：

以下是代码：

＆＃13;

＆＃13;

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var pos = $(this).offset().top;
          var scrolled = $(window).scrollTop();
          jQuery('*[class^="prlx"]').css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });

＆＃13;

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新：在进一步测试中，它似乎在Chrome中完美运行，但Safari和＆amp; FireFox正在展示这个问题。

Answer 1

我将will-change添加到您的CSS属性中。这有助于浏览器找出如何处理元素。它将为浏览器准备动画，因此它不会感到惊讶＆＃34;它需要改变元素的样子。

*[class^="prlx"] {
    ...
    will-change: top;
}

其次，除了使用top属性之外，您还应该尝试各种其他技术。试试background-position，margin-top或transform: translate(0, Xpx)。我最希望得到后者。

Answer 2

我认为这不是代码问题，而是滚动。大多数老鼠的滚轮都没有凹槽。

这使得几乎所有网页上的滚动不均匀。箭头键具有相同的效果。向上翻页和向下翻页非常有趣。您可以尝试找到具有平滑滚动的鼠标，但除此之外，我认为没有解决方案。