Chrome 和 Safari 中的 jQuery 视差滞后答案

【问题标题】：jQuery parallax lags inChrome and SafariChrome 和 Safari 中的 jQuery 视差滞后
【发布时间】：2014-04-10 21:08:37
【问题描述】：

我的视差效果在 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;
}

问题出在哪里？

谢谢！！

【问题讨论】：

“效果不好”是什么意思？
滚动在 google chrome 和 safari 上出现故障。
“故障”是什么意思？我正在 Chrome 中运行你的小提琴，它看起来不错。
我想我明白了。你的意思是当你快速滚动时的棋盘纹理？如果是这样，您可能无法在不改变视差处理方式的情况下做任何事情，请考虑：Fix Checkerboard Scrolling Problem in Google Chrome
我认为他指的是一个断断续续的动画而不是流畅的。

标签： javascript jquery google-chrome scroll parallax

【解决方案1】：

问题是鼠标滚动不流畅。 Use this plugin 覆盖默认鼠标滚动。

【讨论】：