How do i autoscroll an turboframe?

So, i’m trying to force the scroll to the bottom of a turbo-frame when he have some scroll, and i tryied using javascript by the turbo events (turbo:submit-end, turbo:frame-load…) but on this way, the scrollHeight property always are wrong, is like he don’t catch the actual scrollHeight considering the new partial rendered inside the frame.

I tried using some HTML Attributes on the documentation (, like the autoscroll property, but doesn’t work, this is the snippet of my code:


<%= turbo_stream_from ‘checkout_stream’ %>

<%= turbo_frame_tag ‘viajantes’, id: ‘viajante_frame’, class: “flex flex-col gap-4 max-h-[690px] overflow-auto”, loading: “lazy”, autoscroll: true, “data-autoscroll-block”: “end” do %>
<%= render partial: ‘indica/cotar_para_cliente/form_viajante’ %>
<% end %>
<%= link_to “Adicionar novo Viajante”, indica_cotar_para_cliente_adicionar_viajante_path, id:‘adicionar_viajante’, 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,
} %>


def adicionar_viajante
render turbo_stream: turbo_stream.append(‘viajantes’, partial: ‘indica/cotar_para_cliente/form_viajante’, locals: {passports: @passports})

in short, my application runs on the follow flow:

  • User click on the button
  • Button triggers the method of render a new partial inside the frame using turbo stream
  • New partial are add, when are enough partials inside the frame, he will create vertical scroll (there is when i need to force the scroll to the bottom)