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

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

Demo

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

Answer 3

只是一个想法...

也许看看这个函数（包含所有upvotes的函数）How to delay the .keyup() handler until the user stops typing?

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

如果你将它与你的功能结合使用，你应该会发现当用户滚动时图像可能会在屏幕上消失一段时间但是当用户停止滚动时它会赶上 - 你可以通过令人满意的缓和来实现这一点效果也是。问题是，你将不得不与使用各种浏览器的人竞争，虽然它可能在你可爱的快速处理器和最新的浏览器上看起来很好，但对于一些访问者来说可能仍然不稳定。

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

jQuery移动元素与页面闪烁

3 个答案:

Demo