How to autoscroll when a new partial is rendered by turbo frame?

https://turbo.hotwired.dev/reference/frames#html-attributes

autoscroll is a boolean attribute that controls whether or not to scroll a <turbo-frame> element (and its descendant <turbo-frame> elements) into view when after loading.
autoscroll 是一个布尔属性，控制是否scroll turbo-frame元素。

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".
data-autoscroll-block 控制scroll的垂直对齐。如不不设置，那么默认的value是 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".
data-autoscroll-behavior 控制scroll的动画效果。如不不设置，那么默认的value是 auto。


Examples

js

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });