Turbo Frame设置data-autoscroll-block="start"后滚动位置偏移求助

• 利用CSS滚动内边距（推荐）
  给根元素设置scroll-padding-top，值等于粘性导航栏的高度，让浏览器自动为滚动定位预留导航栏空间：

  html {
    scroll-padding-top: 64px; /* 和导航栏的h-16高度对应，1rem=16px，h-16即64px */
  }
  

  这个方法无需额外JS，直接适配Turbo的自动滚动逻辑，从根源解决偏移问题。

• 自定义Turbo滚动事件
  监听turbo:frame-load事件，在Frame加载完成后手动调整滚动位置：

  document.addEventListener('turbo:frame-load', (e) => {
    if (e.target.id === 'entries') {
      const navbarHeight = document.querySelector('header').offsetHeight;
      window.scrollTo({
        top: e.target.offsetTop - navbarHeight,
        behavior: 'smooth'
      });
    }
  });
  

  精准计算Frame内容的顶部位置，避开导航栏遮挡。

• 指定Frame内部锚点
  在Turbo Frame内部添加顶部锚点元素，让Turbo滚动到该锚点：

  <%= turbo_frame_tag "entries", autoscroll: "#frame-top", data: { autoscroll_block: "start" } do %>
    <div id="frame-top" class="sr-only"></div>
    <!-- 内容 -->
  <% end %>
  

  配合scroll-padding-top使用，确保锚点定位在导航栏下方。

内容的提问来源于stack exchange，提问作者mojaomi