Turbo Frame渲染新Partial时如何实现自动滚动？

问题场景 #

页面中有一个表单容器，点击「Add New」按钮会通过Turbo异步渲染新的表单Partial。当表单数量超过容器高度产生垂直滚动时，需要自动滚动到容器底部，但直接给按钮绑定点击事件无法实现预期效果。

已尝试的无效方案 #

1. 按钮点击事件监听：代码能输出should scroll，说明条件判断成立，但滚动操作执行时新表单还未渲染，容器的scrollHeight还没更新：

button.addEventListener("click", function (e) {
    let container = document.querySelector("#container-travellers")
    if (container.scrollHeight > container.clientHeight) {
        console.log('should scroll')
        container.scrollTop = container.scrollHeight;
      }
  })

2. Turbo自带的data-autoscroll-block="end"属性，无效果。
3. 监听turbo:submit-end事件，同样无法触发正确的滚动。

相关HTML结构：

<%= turbo_stream_from 'checkout_stream' %>
<div id="container-travellers" class="shadow-md flex flex-col rounded-md bg-white p-2 w-full max-h-[690px] gap-2 scroll-smooth overflow-auto" data-autoscroll-block="end">
    <%= turbo_frame_tag 'travellers', id:'travellers_frame', class:"flex flex-col gap-4" do %>
        <%= render partial: 'travellers/traveller_form'%>
    <% end %>
    <%= link_to "Add New", add_new_traveller_path, id:'new_traveller', class:"w-full text-center bg-[#{tw_color_purple('600')}] py-1 text-white hover:bg-[#{tw_color_purple('700')}] rounded", data: {
                turbo_method: :post,
      } %>
</div>

临时非最优方案 #

监听DOMNodeInserted事件，当新Partial被插入到Frame时触发滚动。但该事件属于已废弃的DOM API，存在性能隐患，不推荐长期使用。

最优解决方案 #

方案1：监听Turbo的turbo:frame-load事件 #

Turbo Frame加载完成（新Partial渲染完毕）后会触发turbo:frame-load事件，此时容器的scrollHeight已更新，可在此时机执行滚动：

document.addEventListener('turbo:frame-load', (event) => {
  if (event.target.id === 'travellers_frame') {
    const container = document.querySelector('#container-travellers');
    if (container.scrollHeight > container.clientHeight) {
      container.scrollTop = container.scrollHeight;
    }
  }
});

方案2：在Turbo Stream响应中添加滚动指令 #

在后端的Turbo Stream响应里，除了追加新表单，额外添加一段执行滚动的JavaScript代码，确保DOM更新后立即执行：

# 后端的add_new_traveller响应模板
<%= turbo_stream.append 'travellers_frame', partial: 'travellers/traveller_form' %>
<%= turbo_stream.execute do %>
  const container = document.querySelector('#container-travellers');
  if (container.scrollHeight > container.clientHeight) {
    container.scrollTop = container.scrollHeight;
  }
<% end %>

方案3：使用requestAnimationFrame延迟滚动 #

如果坚持使用按钮点击事件，可通过requestAnimationFrame确保滚动操作在DOM更新后执行：

document.querySelector('#new_traveller').addEventListener('click', () => {
  requestAnimationFrame(() => {
    const container = document.querySelector('#container-travellers');
    if (container.scrollHeight > container.clientHeight) {
      container.scrollTop = container.scrollHeight;
    }
  });
});

这些方案都能避免DOMNodeInserted的弊端，且符合Turbo的异步更新逻辑，确保滚动时机准确。

内容的提问来源于stack exchange，提问作者Thiago David