带有页面闪烁的jQuery移动元素

Question

我正在创建的网站有一个框，里面有多个可滚动的框。 还有一个图像，需要在用户滚动的同时向下滚动。

我使用滚动事件进行这项工作，每次滚动 div 时，我都会将顶部位置（跟随页面向下的元素）更改为包含 div 的 scrollTop。

问题是，有时元素似乎会闪烁然后又回到正确的位置。

我认为这与滚动事件没有触发每个滚动的像素有关，但我不确定。

我在 jsfiddle 上有一个非常简单的示例，因此您可以看到问题的实际效果：http://jsfiddle.net/DYqqA/34/

JS：

jQuery('#pageWrap').scroll(function(){
    jQuery('#follow').css({
        top: jQuery(this).scrollTop() + 20
    });
});
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});

HTML：

<div id="scroll">
    <a href="#" class="move">Move</a>
    <div id="pageWrap">
        <div id="follow"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
    </div>
</div>

Answer 1

您可以使用position:fixed 并将pointer-events 设置为none：

http://jsfiddle.net/DYqqA/42/

jQuery('#follow').css('top',$('#scroll').offset().top+20+'px');
jQuery('.move').click(function(){
    jQuery('#pageWrap').animate({
        scrollTop: jQuery('.page').height() * jQuery('.page').length
    }, 4000); 
});

Answer 2

只是一个想法......

也许看看这个功能（所有赞成票的那个）How to delay the .keyup() handler until the user stops typing?

我在所描述的上下文中使用了它，作为一种延迟 ajax 调用的方法，直到用户停止输入一两秒。这可以防止过多的服务器流量并显着降低浏览器的开销。

如果您将此功能与您的功能结合使用，您会发现图像可能会在用户滚动时从屏幕上消失一会儿，但当用户停止滚动时它会赶上 - 您可以通过令人满意的缓动来做到这一点效果也。问题是，您将不得不与使用各种浏览器的人抗衡，虽然它在您可爱的快速处理器和最新的浏览器上看起来不错，但在某些访问者上可能仍然不稳定。

就像我说的......只是一个想法。

Answer 3

我会做的有点不同，我会为图像使用固定位置，以及使用z-index 允许在悬停在图像上时滚动。

Demo

#scroll{
    ...
    z-index:1;
}
#scroll #pageWrap{
    ...
    z-index:0;
}
#scroll #follow{
    ...
    position: fixed;
    z-index:-1;
    ...
}