ruby-on-rails turbo_frame选项的数据自动滚动块“开始”位置未对齐

o7jaxewo 于 2023-01-14 发布在 Ruby

关注(0)|答案(1)|浏览(109)

我想使用Turbo Reference中介绍的data-autoscroll-block属性，将屏幕切换到turbo_frame时的滚动位置设置为TOP，但它并不完全位于顶部位置。由于导航栏是粘性的，我猜测高度（具体来说，64 px）将发生偏移。

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

任何关于如何解决这个问题的建议都将不胜感激。

ruby-on-rails

来源：https://stackoverflow.com/questions/75078241/data-autoscroll-block-start-position-of-turbo-frame-option-is-misaligned

1条答案

按热度按时间

zazmityj1#

你可以试着用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>

赞(0）回复(0）举报 2023-01-14

我来回答

ruby-on-rails turbo_frame选项的数据自动滚动块“开始”位置未对齐

1条答案

相关问题

热门标签

最新问答