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

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

Any advice on how to fix this would be appreciated.

CodePudding user response：

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 >

<body>
  <div ></div>

  <header>
    HEADER. Why you scroll the actual page?! <br> Sorry, Stackoverflow.
  </header>

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

</body>

</html>