带有页面闪烁的 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); 
});