有时,希望在页面访问之间保持滚动位置。
加载数据后,Turbolinks会重置滚动位置。
如何为特定元素禁用它?
最佳答案
我在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
。
关于turbolinks - 如何使用turbolink保持滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39679154/