2

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.

mojaomi
  • 115
  • 6

1 Answers1

2

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>
Alex
  • 16,409
  • 6
  • 40
  • 56