javascript scroll上的延迟 - Chrome

Question

我试图在用户滚动时更改背景位置& top属性。我想模拟背景和视差雪碧一个固定的位置，所以我做了以下内容：

HTML部分

<section id="first" data-type="background" data-speed="1"> 
    <div id="sprite1" data-type="sprite" data-speed="-1.5"></div> 
    <div id="sprite2" data-type="sprite" data-speed="-1"></div> 
</section> 
<section id="second" data-type="background" data-speed="1"> 

</section> 

CSS部分

section { 
    width: 100%; 
    height: 1000px; 
    position: relative; 
} 

#first { 
    background: url('../img/bg1.png'), no-repeat, fixed, 50% 0; 
} 

#second { 
    background: url('../img/bg2.png'), no-repeat, fixed, 50% 0; 
} 

#sprite1 { 
    position: relative; 
    background: url('../img/sprite1.png'), no-repeat, fixed, 50% 0; 
    width: 100px; 
    height: 100px; 
    top: 550px; 
    left: 100px; 
} 

#sprite2 { 
    position: relative; 
    background: url('../img/sprite2.png'), no-repeat, fixed, 50% 0; 
    width: 200px; 
    height: 200px; 
    top: 650px; 
    left: 150px; 
} 

JS部分

$(document).ready(function() { 

    /* Initialisation */ 
    var $window = $(window); 

    var offset = 0; 
    $('section[data-type="background"]').each(function(index) { 
     var $this = $(this); 
     console.log($this); 
     $this.data('data', { 
      height: $this.height() + offset, 
      speed: parseFloat($this.attr('data-speed')) 
     }); 
     offset = $this.data('data').height; 
    }); 

    $('div[data-type="sprite"]').each(function(index) { 
     var $this = $(this); 
     $this.data('data', { 
       xPosition: parseInt($this.css('top').replace(/px/, '')), 
      yPosition: parseInt($this.css('left').replace(/px/, '')), 
      speed: parseFloat($this.attr('data-speed')) 
     }); 
     console.log($this.data('data')); 
    }); 

    $('#first').data('position', '0'); 
    $(window).scroll(function(){ 
     console.log($(this)); 
     var scrollPos = parseInt($window.scrollTop()); 
     $('section[data-type="background"]').each(function(index) { 
      var $this = $(this); 
      $this.css('background-position', '50% ' + (scrollPos/$this.data('speed') + $this.data('data').height) + 'px'); 
     }); 
     $('div[data-type="sprite"]').each(function(index) { 
      var $this = $(this); 
      $this.css('top', ((scrollPos/$this.data('data').speed) + $this.data('data').xPosition) + 'px'); 
     }); 
    }); 

}); 

你可以看到结果here

在Firefox上是没有问题的，背景似乎固定的，但在Chrome，它似乎是浏览器通过滚动页面开始并执行该代码后。所以它完全在Chrome上被猛拉... 有没有什么办法在页面滚动之前强制执行代码？

THX :)

Answer 1

我不知道你指的在滚动动画什么，我只是猜测。而不是使用$ .css（），你可以开始使用$ .animate（）来使转换更平滑。我也在IE中检查了这一点，它也似乎也这样做。当使用$ .animate（）而不是$ .css时，可能会在多个浏览器中以不同方式注册的$ .scroll（）可能会变得平滑。