Data-autoscroll-block «начальная» позиция опции turbo_frame смещена

Я хотел бы использовать атрибут data-autoscroll-block, описанный в Turbo Reference, чтобы установить позицию прокрутки в TOP, когда экран переходит через turbo_frame, но он не находится полностью в верхней позиции. Поскольку панель навигации липкая, я предполагаю, что высота (в частности, 64 пикселя) будет смещена.

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

11.01.2023 05:07

Конечные и Readonly классы в PHP

В прошлом, когда вы не хотели, чтобы другие классы расширяли определенный класс, вы могли пометить его как final.

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

БЭМ: Конвенция об именовании CSS

Я часто вижу беспорядочный код CSS, особенно если проект большой. Кроме того, я совершал эту ошибку в профессиональных или личных проектах и...

Революционная веб-разработка ServiceNow

В быстро развивающемся мире веб-разработки ServiceNow для достижения успеха крайне важно оставаться на вершине последних тенденций и технологий. По...

Как добавить SEO(Search Engine Optimization) в наше веб-приложение и как это работает?

Заголовок веб-страницы играет наиболее важную роль в SEO, он помогает поисковой системе понять, о чем ваш сайт.

Конфигурация Jest в angular

В этой статье я рассказываю обо всех необходимых шагах, которые нужно выполнить при настройке jest в angular.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать компенсировать это с помощью 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>

Большой! Большое спасибо за оперативный и точный ответ.

— 12.01.2023 07:10

11.01.2023 08:13