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

Posted 2023-03-06

【中文标题】带有页面闪烁的jQuery移动元素

【英文标题】：jQuery moving element with page flashing

【发布时间】：2013-05-23 09:39:26

【问题描述】：

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

我使用滚动事件进行这项工作，每次滚动 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>

【问题讨论】：

另一种解决方案是让您的图像固定，然后您不需要重新计算它在滚动时的位置，而是在浏览器调整大小时。

位置固定的问题是当用户将鼠标悬停在固定的元素上时，他们无法滚动，因为固定位置是相对于窗口而不是相对父级。

@TheoKouzelis 这发生在 Firefox 中，但不像其他浏览器那样频繁，例如 Chrome 和 IE。

【参考方案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); 
);

【讨论】：

很酷的解决方案，但有compatibility issues，仍然+1

正如 Kuf 所说，很酷的解决方案，但这也必须适用于旧版本的 IE。不过谢谢

我已经使用了这个解决方案。它在新浏览器中很棒，但在旧浏览器中不起作用。非常感谢！

【参考方案2】：

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

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

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

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

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

【参考方案3】：

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

Demo

#scroll
    ...
    z-index:1;

#scroll #pageWrap
    ...
    z-index:0;

#scroll #follow
    ...
    position: fixed;
    z-index:-1;
    ...

【讨论】：

正如我在我的问题的 cmets 中所说，如果用户将鼠标悬停在徽标上，他们将无法滚动 div。

@CharliePrynn 这可以使用正确的z-index 修复，查看更新后的答案