我想使用Turbo Reference中描述的data-autoscroll-block属性，当屏幕通过turbo_frame过渡时，将滚动位置设置为TOP，但它并不完全位于顶部位置。由于导航条是粘性的，我猜高度(具体来说，64px)会被移动。
<%# Applicable index view %>
<%= turbo_frame_tag "entries", autoscroll: true, data: { autoscroll_block: "start" } do %>
contents
<% end %>
<%# navbar view %>
<header class="sticky top-0 z-10 bg-white w-full h-16....">
contents
</header>
任何关于如何解决这个问题的建议将不胜感激。
你可以尝试用css来抵消它。由于某些原因，代码片段也滚动实际的页面，只是"运行代码片段"。点击"整页"。
// fake the turbo frame navigation, ignore this part
document.querySelector("turbo-frame a").onclick = event => {
event.preventDefault();
var frame = event.target.closest("turbo-frame");
var data = frame.dataset;
frame.scrollIntoView({
behavior: data.autoscrollBehavior,
block: data.autoscrollBlock
});
}.scroller {
scroll-snap-type: y;
scroll-padding-block-start: 64px;
}
header {
position: sticky;
top: 0px;
height: 64px;
border: 1px solid;
}
.spacer {height: 50px;}
.spacer-xl {height: 1600px;}<html class="scroller">
<body>
<div class="spacer"></div>
<header>
HEADER. Why you scroll the actual page?! <br> Sorry, Stackoverflow.
</header>
<div class="spacer"></div>
<turbo-frame autoscroll="true" data-autoscroll-block="start" data-autoscroll-behavior="smooth">
inside the frame <a href="javascript:void(0);">click me</a>
</turbo-frame>
<div class="spacer-xl"></div>
</body>
</html>