javascript - 通过 jQuery 定位时背景图像在 chrome 中抽动

Question

我写了一个简单的视差脚本。

当我在 Chrome 和 Internet Explorer 中使用鼠标滚轮滚动时，背景图像在重新定位时会抖动......在 Firefox 中，它总是滚动得非常平滑(正如预期的那样)。这是浏览器中与性能相关的问题吗？我能做些什么来防止这种情况(我怎样才能改进脚本)？

在线示例: http://lab.dev-nook.de/_test/paralax/

CSS:

body {
        font:100%/1.5 arial;
        padding:0;
        margin:0;
        color:#fff;
}
.smplParalax {
        background-repeat:no-repeat;
        background-size:cover;
}
.content {
        border-bottom:solid 1px #f00;
        min-height:500px;
}
.content .inner {
        padding:20px;
}
#footerSectionOne {
        background-image:url(paralax/1.jpg);
}
#footerSectionTwo {
        background-image:url(paralax/2.jpg);
}

HTML:

<div class="smplParalax content" id="footerSectionOne">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>
  <div class="smplParalax content" id="footerSectionTwo">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>

JavaScript(jQuery):

function initParalx(options) {
    if(typeof options == "undefined"){
        var options = {
            'class': 'smplParalax',
            'q': 2
        }
    }

    function _handleParalax(options){
        var relPos = 0;
        $(".smplParalax").each(function() {
            relPos = $(window).scrollTop() - $(this).offset().top;
            $(this).css("background-position", "0 " + (relPos / options.q) + "px");
        });
    }

    $(window).on("load scroll resize", function() {
        _handleParalax(options);
    });
}

$(window).ready(function() {
    initParalx({
        'q': 1.5
    });
});

Answer 1

使用 background-attachment: fixed 来创建实际的视差效果，您可以查看下面的演示，但您需要根据需要修复 CSS。但是，如您所见，滚动是平滑的。

function initParalx(options) {
    if(typeof options == "undefined"){
        var options = {
            'class': 'smplParalax',
            'q': 2
        }
    }

    function _handleParalax(options){
        var relPos = 0;
        $(".smplParalax").each(function() {
            relPos = $(window).scrollTop() - $(this).offset().top;
            $(this).css("background-position", "0 " + (relPos / options.q) + "px");
        });
    }

    $(window).on("load scroll resize", function() {
        _handleParalax(options);
    });
}

$(window).ready(function() {
    initParalx({
        'q': 1.5
    });
});

body {
        font:100%/1.5 arial;
        padding:0;
        margin:0;
        color:#fff;
  height:100%;
}
.smplParalax {
    height: 100%; 
   position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.content {
        border-bottom:solid 1px #f00;
       
}
.content .inner {
        padding:20px;
}
#footerSectionOne {
        background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/1.jpg);
        
}
#footerSectionTwo {
        background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/2.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smplParalax content" id="footerSectionOne">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>
  <div class="smplParalax" id="footerSectionTwo">
    <div class="inner">
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
          <h1>Lorem Ipsum</h1>
      </div>
  </div>

More info