موقعیت اسکرول را در Turbo بدون داده-turbo-permanent حفظ کنید

بسیار خوب، این برای آینده من کوتاه و شیرین خواهد بود.

حفظ موقعیت اسکرول بسیار دردناک است.

برخی از مقالات مانند این را شما اضافه کرده اید data-turbo-permanent: https://dev.to/mikerogers0/persist-scroll-positions-with-hotwire-turbo-1ihk

چرا که نه data-turbo-permanent? خوب، در مورد ما یک نوار کناری با یک پیوند برجسته برای صفحه فعلی داشتیم، که به این معنی است که کلیک روی پیوند هرگز اجازه به‌روزرسانی پیوند فعلی را نمی‌دهد. راه‌حل‌هایی وجود داشت که می‌توانستیم انجام دهیم، اما تصمیم گرفتیم این کار را نکنیم.

این مشکل GitHub نیز وجود دارد که راه‌حل‌های زیادی دارد:

https://github.com/hotwired/turbo/issues/37

چند قطعه در آنجا وجود دارد که بسیار نزدیک به این است. این چیزی است که اخیراً استفاده کردم و به خوبی کار کرد. در اینجا چیزی است که من به آن رسیدم که برای من کار کرد.

import * as Turbo from '@hotwired/turbo'

if (!window.scrollPositions) {
  window.scrollPositions = {};
}

function preserveScroll () {
  document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
    scrollPositions[element.id] = element.scrollTop;
  })
}

function restoreScroll () {
  document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
    element.scrollTop = scrollPositions[element.id];
  }) 
}

window.addEventListener("turbo:before-cache", preserveScroll)
window.addEventListener("turbo:load", restoreScroll)

2 نکته کلیدی برای توجه وجود دارد. هر عنصر باید یک شناسه منحصر به فرد داشته باشد و هر عنصر باید یک شناسه داشته باشد data-preserve-scroll بر روی آن. اینطوری:

<nav id="sidebar" data-preserve-scroll>
  <!-- stuff -->
</nav>

شکار مبارک!

ویرایش: یکی از نکات منفی این رویکرد این است که من متوجه سوسو زدن مختصری در Safari / Chrome شده‌ام. بدون سوسو زدن در FF. شاید یک Turbo Transition یا استفاده از data-turbo-permanent بتواند سوسو زدن را حذف کند.