在没有数据涡轮 - 永久性的情况下保持涡轮的滚动位置-DEV365 开发者社区

好吧，这对我将来会很短而甜美。

保持滚动位置是痛苦的。

您是否添加了data-turbo-permanent：https://dev.to/mikerogers0/persist-scroll-positions-with-hotwire-turbo-1ihk

为什么不kude0？好吧，在我们的情况下，我们有一个侧边栏，该侧边栏具有当前页面的突出显示链接，这意味着从未引起链接点击更新当前链接。我们可以做一些解决方法，但决定不这样做。

还有这个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件事要注意。每个元素都必须具有唯一的ID，并且每个元素都必须在其上具有data-preserve-scroll。喜欢：

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

快乐的狩猎！