2

i'm having a little trouble trying to force a scrolling with javascript when a new partial are rendered by turbo-frame, the page have an small form, and when the button are clicked, he triggers an event who render a new form, and when a new form are added, if the amount of forms are enough, he will create an vertical scroll.

So i try to add an event listener on button click, so when he clicks, he catch the container scrollHeight and compares to clientHeight, if is greater, he will do the attribution of element scrollTop, this is the code:

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

i searched a lot, and try to do that with turbo events like autoscroll property of turbo frame, or some event like turbo:submit-end, but on this both events, the scroll isn't happening, only the console log, comproving the conditional is working.

if thats important, this is the html code of the turbostream and turbo frame call

 <%= 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>

SOLUTION (not the best): After i tried find some solutions with Turbo helpers, events and attributes and none of these worked, i run into javascript, and make it work, listen to the event DOMNodeInserted, so, when a new partial are streamed and append on the frame, the event are triggered and run the scroll function.

It's not the best solution i know, but for me, fixed the problem.

Thiago David
  • 87
  • 7
  • Why don't use Stimulus controller for this? – mechnicov Jun 18 '23 at 17:12
  • @mechnicov i tried it too, but on the actual project, stimulus are outdated, and actually not properly configured, i found an solution but not using rails, i will show it on the question – Thiago David Jun 19 '23 at 15:22

1 Answers1

0

Reading the official docs I found the following

autoscroll is a boolean attribute that controls whether or not to scroll a element (and its descendant elements) into view when after loading. Control the scroll’s vertical alignment by setting the data-autoscroll-block attribute to a valid Element.scrollIntoView({ block: “…” }) value: one of "end", "start", "center", or "nearest". When data-autoscroll-block is absent, the default value is "end". Control the scroll’s behavior by setting the data-autoscroll-behavior attribute to a valid Element.scrollIntoView({ behavior: “…” }) value: one of "auto", or "smooth". When data-autoscroll-behavior is absent, the default value is "auto".

Could you try adding to your turbo_frame element the following html attributes

<%= turbo_frame_tag 'travellers', id:'travellers_frame', class:"flex flex-col gap-4", 'data-autoblock-scroll': 'end' do %>

or

<%= turbo_frame_tag 'travellers', id:'travellers_frame', class:"flex flex-col gap-4", 'data-autoscroll-behavior': 'smooth' do %>
zhisme
  • 2,368
  • 2
  • 19
  • 28
  • Yep, i see that too, but doesn't work for me for some reason :/ – Thiago David Jun 19 '23 at 15:22
  • auto-scroll-behavior also have no affect? did you try all options auto smooth? – zhisme Jun 20 '23 at 16:23
  • yep, i tried all the options with help of my team mates, and we can't do that work with any event or attribute of hotwired documentation, i don't know if there is something wrong on the way we setup the frames and turbo stream, but doesn't worked anyway – Thiago David Jun 20 '23 at 16:56
  • maybe you can share some outer html code for that turbo frame / turbo stream? Maybe it is overridden somewhere before – zhisme Jun 21 '23 at 14:09
  • 1
    btw, it's `data-autoscroll-block` and not `data-scroll-autoblock`. – courtsimas Aug 22 '23 at 20:07