[SOLVED] data-autoscroll-block "start" position of turbo

data-autoscroll-block "start" position of turbo_frame option is misaligned

I would like to use the data-autoscroll-block attribute described in Turbo Reference to set the scroll position to TOP when screen transitions by turbo_frame, but it is not completely at the top position. Since the navbar is sticky, I'm guessing that the height (specifically, 64px) will be shifted.

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

Any advice on how to fix this would be appreciated.

Solution

You can try offsetting it with css. For some reason the snippet scrolls the actual page as well, just "Run code snippet" and go "Full page".

// 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>