使用Turbo与Stimulus，提交表单后如何让Rails列表滚动至开头？

Turbo Stream的prepend动作仅负责元素插入，不会自动触发滚动行为，你可以通过以下几种方案实现目标：

方法一：自定义Turbo Stream动作 #

这种方式贴合Hotwire的设计思路，把滚动逻辑封装成可复用的Turbo动作：

1. 注册自定义流动作
   在app/javascript/application.js中添加：

import { StreamActions } from "@hotwired/turbo"

// 注册scroll_to_start自定义动作
StreamActions.scroll_to_start = function() {
  const targetContainer = document.getElementById(this.target)
  if (targetContainer) {
    // 直接滚动到开头（无需平滑效果用此代码）
    targetContainer.scrollLeft = 0
    // 若需要平滑滚动，替换为下方代码：
    // targetContainer.scrollTo({ left: 0, behavior: 'smooth' })
  }
}

2. 在控制器中调用自定义动作
   在处理创建请求的控制器动作里，同时返回prepend和自定义滚动动作：

def create
  @item = Item.create(item_params)

  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: [
        turbo_stream.prepend(:your_list_dom_id, partial: "items/item", locals: { item: @item }),
        turbo_stream.scroll_to_start(:your_list_dom_id)
      ]
    end
  end
end

注意将:your_list_dom_id替换为你实际的列表dom_id名称。

方法二：监听Turbo渲染事件 #

通过监听Turbo内置事件，在流动作完成后触发滚动：

在app/javascript/application.js中添加事件监听：

document.addEventListener('turbo:stream:after-render', (event) => {
  const streamElement = event.target
  // 判断是否为目标列表的prepend动作
  if (streamElement.action === 'prepend' && streamElement.target === 'your_list_dom_id') {
    const listContainer = document.getElementById('your_list_dom_id')
    if (listContainer) {
      listContainer.scrollLeft = 0
    }
  }
})

这种方式无需修改控制器逻辑，适合快速实现需求。

方法三：在Partial中嵌入脚本（简单但不推荐） #

直接在渲染的条目partial末尾添加脚本，每次插入条目时触发滚动：

<%= content_tag :div, id: dom_id(item) do %>
  <!-- 你的条目内容 -->
<% end %>

<script>
  document.getElementById('<%= dom_id(your_list_object) %>').scrollLeft = 0;
</script>

此方法的缺点是每次插入条目都会执行脚本，可能导致重复触发，仅适合简单场景。

注意事项 #

• 确认你的横向列表容器CSS设置为overflow-x: auto（你提到的overflow-y: auto是纵向滚动，横向滚动需用overflow-x），搭配scroll-snap-type: x mandatory才能保证滚动行为正常。

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