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

Question

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

988 views Asked by mojaomi At 11 January 2023 at 04:07

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.

Original Q&A

There are 1 answers

**Alex** · Accepted Answer · 2023-01-11 07:13:23

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>

TechQA.

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

There are 1 answers

Related Questions in RUBY-ON-RAILS

Related Questions in TURBO

Related Questions in TURBO-FRAMES

Popular Questions

Popular Tags

Trending Questions