Turbo Stream渲染后滚动元素及Turbo事件未触发问题咨询

为何其他Turbo事件未触发？ #

• 事件触发场景不匹配：Turbo的每个事件都有明确的触发条件，比如turbo:load仅在页面首次加载或Turbo驱动的页面切换时触发；turbo:frame-load仅在Turbo Frame完成内容加载时触发。你当前是通过Turbo Stream更新局部DOM，不属于这些事件的触发场景，因此不会被触发。
• 事件绑定范围错误：像turbo:stream:rendered这类全局事件需要绑定在document上才能监听。如果你的Stimulus控制器仅绑定在表单或局部元素上，就会错过这些全局事件。
• Turbo版本差异：不同版本的Turbo事件可能存在调整，你可以查看项目package.json中@hotwired/turbo-rails的版本，确认对应版本的官方事件列表。比如部分旧版本可能没有turbo:stream:rendered事件。

实现Turbo Stream渲染后滚动到错误区的方案 #

你可以利用已触发的turbo:submit-end或正确监听turbo:stream:rendered事件来实现需求，示例Stimulus控制器代码如下：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 监听Turbo Stream渲染完成事件
    document.addEventListener("turbo:stream:rendered", this.scrollToErrors.bind(this))
    // 或监听表单提交结束事件（包含Stream处理流程）
    document.addEventListener("turbo:submit-end", this.checkAndScroll.bind(this))
  }

  scrollToErrors() {
    const errorElement = document.querySelector("#error-explanation")
    if (errorElement) {
      errorElement.scrollIntoView({ behavior: "smooth" })
    }
  }

  checkAndScroll(event) {
    // 仅在表单提交失败时滚动到错误区
    if (!event.detail.success) {
      const errorElement = document.querySelector("#error-explanation")
      if (errorElement) {
        errorElement.scrollIntoView({ behavior: "smooth" })
      }
    }
  }

  disconnect() {
    // 清理事件监听，避免内存泄漏
    document.removeEventListener("turbo:stream:rendered", this.scrollToErrors.bind(this))
    document.removeEventListener("turbo:submit-end", this.checkAndScroll.bind(this))
  }
}

说明：turbo:submit-end事件在整个表单提交流程（包括Turbo Stream的DOM更新）完成后触发，通过event.detail.success可以判断提交是否成功，针对性处理滚动逻辑；turbo:stream:rendered则在每个Turbo Stream片段渲染完成后触发，适合需要监听所有Stream更新的场景。

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