javascript animate-ScrollTop 随机工作答案

【问题标题】：javascript animate-ScrollTop works randomlyjavascript animate-ScrollTop 随机工作
【发布时间】：2014-10-16 13:00:15
【问题描述】：

我在 5 秒后列出了 10 个元素，这些元素开始一个接一个地突出显示，而前一个元素未被突出显示。当突出显示到达最后一个元素时，它会从头开始。突出显示是通过向元素添加选定的 id 来完成的。到此为止，我已经完成了。

列表中只有 3 个元素可见，其余元素需要滚动到。这就是变得棘手的地方。我用过：

scrollToSelected: =>
 nav = $("#selected")
 if nav.length
   $(@el).animate
     scrollTop: nav.offset().top
   , 1000

此脚本正在滚动，但与预期不同，它随机上下滚动，就像它不知道项目的顶部一样。问题出在哪里？

我尝试在控制台中输出.offset().top 值，所以结果是这样的：

有什么想法吗？

编辑：将偏移量更改为位置后，我得到这些值：这些还不是很狂野，它没有像预期的那样滚动，在第 3-4 个元素之后，选定的元素在可见元素下方的某个地方

【问题讨论】：

这个列表是在 overflow:hidden div 内还是 html 页面的直接子级？
它是一个overflow里面的列表：hidden 并且列表的内容也是由javascript渲染的
尝试使用nav.position().top 而不是nav.offset().top，后者给出相对于文档的位置。但这仍然不能解释百搭值，除非你同时滚动页面
我已按照您的建议添加了使用位置的编辑。
我想我有解决方案，现在发布答案...

标签： javascript ruby-on-rails backbone.js coffeescript

【解决方案1】：

正如我在 cmets 中提到的，您需要使用 .position() 而不是 .offset() 作为相对偏移量而不是文档偏移量。

由于订单在几个元素之后下降，听起来您需要增加 scrollTop() 而不仅仅是替换它。试试这个（未经测试的）代码：

scrollToSelected: =>
  nav = $("#selected")
  if nav.length
    el = $(@el) 
    el.animate
      scrollTop: el.scrollTop() + nav.position().top
      , 1000

【讨论】：

这很有魅力！谢谢您的回答！大喜欢:)
@LogofaT 干杯，这是我记得几个月前与自己打交道的事情之一。所有处理这些事情的教程都非常复杂。快乐编码。