我有一个小麻烦,试图强制与JavaScript滚动时,一个新的部分是由涡轮框架呈现,页面有一个小的形式,当按钮被点击,他触发一个事件谁呈现一个新的形式,当一个新的形式被添加,如果形式的数量是足够的,他将创建一个垂直滚动。
所以我尝试在按钮单击时添加一个事件侦听器,所以当他单击时,他会捕获容器scrollHeight并与clientHeight进行比较,如果更大,他将执行元素scrollTop的属性,这是代码:
button.addEventListener("click", function (e) {
let container = document.querySelector("#container-travellers")
if (container.scrollHeight > container.clientHeight) {
console.log('should scroll')
container.scrollTop = container.scrollHeight;
}
})
我搜索了很多,并尝试这样做与涡轮事件像autoscroll
属性的涡轮帧,或一些事件像turbo:submit-end
,但在这两个事件,滚动不发生,只有控制台日志,comproving条件是工作.
如果这很重要的话,这是turbostream和turbo帧调用的html代码
<%= 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>
**解决方案(不是最好的):**在我尝试使用Turbo助手,事件和属性找到一些解决方案后,这些都不起作用,我运行到JavaScript,并使其工作,监听事件DOMNodeInserted
,所以,当一个新的部分被流式传输并附加在帧上时,事件被触发并运行滚动功能。
这不是我知道的最好的解决方案,但对我来说,解决了这个问题。
1条答案
按热度按时间6pp0gazn1#
阅读官方文档,我发现以下内容
autoscroll是一个布尔属性,它控制在加载之后是否将元素(及其后代元素)滚动到视图中。通过将data-autoscroll-block属性设置为有效的Element来控制滚动的垂直对齐方式。scrollIntoView({ block:“...”})值:“结束”、“开始”、“中心”或“最近”中的一个。当data-autoscroll-block不存在时,默认值为“end”。通过将data-autoscroll-behavior属性设置为有效的Element来控制滚动的行为。scrollIntoView({ behavior:“...”})值:“自动”或“平滑”中的一个。当data-autoscroll-behavior不存在时,默认值为“auto”。
您可以尝试向
turbo_frame
元素添加以下html属性吗或