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 (https://turbo.hotwired.dev/reference/frames), like the autoscroll property, but doesn’t work, this is the snippet of my code:
View:
<%= 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,
} %>
Controller
def adicionar_viajante
render turbo_stream: turbo_stream.append(‘viajantes’, partial: ‘indica/cotar_para_cliente/form_viajante’, locals: {passports: @passports})
end
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)