函数调用上的scrollTop动画多个

Posted 2023-05-08

【中文标题】函数调用上的scrollTop动画多个

【英文标题】：scrollTop on function call animate multiple

【发布时间】：2016-08-12 16:01:06

【问题描述】：

我有这个http://jsfiddle.net/Borisko/604rLvbc/38/

我想给scrollTop添加动画（延迟，什么都好）：

 $div.scrollTop(fixpos);

添加动画后，一切都坏了，滚动多次。

有什么方法可以让 scrollTop 动画只运行一次（就像没有动画一样）

【问题讨论】：

那么，你到底想要什么？动画功能？

如果你按原样滚动元素，一切都按我的意愿工作。 （如滚动等，）现在我想将动画添加到 scrollTop - 所以是动画功能 - 使滚动动画，但仍然一步一步 = 第一次滚动时不去测试 4 或 6，动画被“调用”多次）

我不明白这里有什么问题。我尝试了第一次滚动，但效果很好。我的意思是，如果您快速滚动，那么鼠标滚轮当然会被多次调用

再次确定。如果你运行这段代码 - 没关系。 --- 但我想为 $div.scrollTop(fixpos); 添加动画- 如果您添加动画，功能停止，并且代码不起作用 - 一个滚动上的动画多次进入错误的元素......但没有动画滚动只正确一步......所以问题是如何为 scrollTop 设置动画（fixpos );只实现一个滚动步骤，就像没有动画一样

【参考方案1】：

好的，所以我不能确定这背后的原因 - 如果你添加动画，功能会停止，并且代码不起作用 - 一个滚动上的动画会多次出现在错误的元素上 - 但是这就是我认为这里发生的事情：当我们将值分配给pos时，scrollTop() 值仍然没有更新@

var pos = $div.scrollTop();

因此，在制作动画之前，我将 scrollTop 值存储在全局变量 valuePos 中，然后在下一次滚动时将该值设置为 pos。我已经用scrollTop 初始化了valuePos。

var valuePos = $("#target").scrollTop();

如果您快速滚动，动画将起作用，但会稍有延迟，因为我们在这里调用了多个 animate。我在animate 调用之前使用了.stop()，这样动画就不会滞后太多。

请参考这个fiddle。

【讨论】：

当你覆盖数学函数时 var fixpos = Math.floor(nextPos / 30.0) * 30; valuePos = 固定位置；当错误的像素组合显示时，这会导致“实际” div 有时从顶部位于错误的位置。无论如何谢谢回复，会尝试更新你的代码。

这里是固定在正确的地方，谢谢jsfiddle.net/Borisko/9Lp75w6c/3

哦，我知道为了避免这个问题，您调整了 pos 的值。现在可以解决问题了。