turbolinks - 如何使用turbolink保持滚动？

Question

有时，希望在页面访问之间保持滚动位置。

加载数据后，Turbolinks会重置滚动位置。

如何为特定元素禁用它？

Answer 1

我在ES6中的解决方案:

const turbolinksPersistScroll = () => {
  const persistScrollDataAttribute = 'turbolinks-persist-scroll'
  let scrollPosition = null
  let enabled = false

  document.addEventListener('turbolinks:before-visit', (event) => {
    if (enabled)
      scrollPosition = window.scrollY
    else
      scrollPosition = null
    enabled = false
  })

  document.addEventListener('turbolinks:load', (event) => {
    const elements = document.querySelectorAll(`[data-${persistScrollDataAttribute}="true"]`)
    for (let i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', () => {
        enabled = true
      })
    }

    if (scrollPosition)
      window.scrollTo(0, scrollPosition)
  })
}

turbolinksPersistScroll()

并在您要保留滚动条位置的链接上添加 data-turbolinks-persist-scroll=true链接。
<a href="..." data-turbolinks-persist-scroll=true>Link</a>
这也适用于我，也适用于 link_to remote: true。