jQuery视差滞后于Chrome和Safari

Question

我的视差效果在Firefox中效果很好，但是在chrome和safari中效果不佳。 这是一个jsfiddle.net/n5kjK/1/ ，它描述了我页面的结构。

我的HTML

<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>

我的JS

$(function(){
    $(window).on('scroll', function(e) {
        $('.ciao').html("ciao");
        var windowScrollTop=$(this).scrollTop();
        parallax(windowScrollTop);      
    }); 
});

function parallax(windowScrollTop) {
    $('.thumbnail-container img').each(function(index){
    var dif=windowScrollTop-$(this).parent().position().top;
        var scrollSlow = dif *(0.5);
        if(dif>=0)
            $(this).css('top', (scrollSlow) + 'px');
     });
}

和我的CSS

article{
    width:100%;
    text-align:justify;
}
.thumbnail-container{
  position: relative;
  height: 350px;
  overflow: hidden;
 }

.thumbnail-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

问题出在哪儿？

谢谢！！

Answer 1

问题是鼠标滚动不流畅。 使用此插件可以覆盖默认的鼠标滚动。