【问题标题】:scrollTop on function call animate multiple函数调用上的scrollTop动画多个
【发布时间】: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 );只实现一个滚动步骤,就像没有动画一样

标签: jquery function scroll jquery-animate


【解决方案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 的值。现在可以解决问题了。
猜你喜欢
  • 1970-01-01
  • 2013-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-16
  • 1970-01-01
  • 2012-04-25
  • 1970-01-01
相关资源
最近更新 更多