我正在尝试使用 Aurelia 和 JQuery 在列表更新时滚动到列表底部答案

【问题标题】：I'm trying to scroll to the bottom of a list when it's updated, using Aurelia and JQuery我正在尝试使用 Aurelia 和 JQuery 在列表更新时滚动到列表底部
【发布时间】：2021-08-15 22:55:45
【问题描述】：

我在可滚动的 div 中显示存储在数组中的项目列表。

<div id="historybox" class = "overflow-auto row h-75 border border-primary">
  <div class="col">
    <ul>
      <li repeat.for="line of history">
        <strong>${line.label}</strong> : ${line.text}
      </li>
    </ul>
  </div>
</div>

我想要这样当一个新项目被添加到历史数组时，历史框 div 会向下滚动到底部。

我尝试在变量中添加@observable标签，然后添加以下方法：

historyChanged(newValue, oldValue) {
  $('#historybox').scrollTop($('#historybox')[0]?.scrollHeight ?? 0);
}

当添加新项目时，这确实会向下滚动列表。但它只会将其滚动到列表中的倒数第二项，而不是最后一项。

我怀疑这是因为 historyChanged 函数在历史列表更改之后但在页面实际更新之前运行。在调用 scrollTop 之前添加 100 毫秒的延迟似乎可以解决它，但这似乎不是一个理想的解决方案。所以我想知道这样做的“正确”方法是什么。

【问题讨论】：

Yes it does. 但是是的，我可能应该使用$('#historybox').prop('scrollHeight')。虽然这并不能解决我的问题。
我的立场是正确的 - 这是我不知道的一点语法糖：)

标签： javascript jquery typescript aurelia

【解决方案1】：

前段时间我不得不做一些动态的“滚动到底部”。你可以把它放在回调或其他东西中。我用纯 JavaScript 做到了。

// Pin scroll to bottom
document.getElementById('historybox').scrollTop = document.getElementById('historybox').scrollHeight

如你所见，它将scrollTop属性设置为scrollHeight属性的值，也就是底部。

我只是匆匆路过，希望对您有所帮助，如果这不是您想要的，请告诉我，我稍后会尽力帮助您。

【讨论】：

确实将框滚动到底部，但我仍然需要弄清楚如何让它在列表项添加到页面之后而不是之前运行。
正如我所说，您可以在函数的回调中使用它，或者在 Hook 或其他东西中使用它。我已经将它与 React 一起使用，所以我只是将它放在 useEffect Hook 上。 jQuery 可能有一些东西，或者您可以将其编写为“添加”函数的回调，或者将代码放在函数的末尾。你知道什么是回调函数吗？如果没有，看看这个。