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

問題是鼠標滾動不流暢。 使用此插件可以覆蓋默認的鼠標滾動。