我知道在Turbolinks 5上可以调用以下代码,但它会改变滚动位置。有没有一种方法可以调用Turbolinks来刷新页面而不改变滚动位置?
Turbolinks.visit(location.toString());
这可以达到我想要的效果,但我希望使用Turbolinks
window.location.reload()
我知道在Turbolinks 5上可以调用以下代码,但它会改变滚动位置。有没有一种方法可以调用Turbolinks来刷新页面而不改变滚动位置?
Turbolinks.visit(location.toString());
这可以达到我想要的效果,但我希望使用Turbolinks
window.location.reload()
在调用visit
之前,存储当前滚动位置,然后在页面加载时滚动到该位置。将存储的滚动位置重置为null
可确保后续页面加载不会滚动到旧位置。一种可能的实现方式如下:
var reloadWithTurbolinks = (function () {
var scrollPosition
function reload () {
scrollPosition = [window.scrollX, window.scrollY]
Turbolinks.visit(window.location.toString(), { action: 'replace' })
}
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition)
scrollPosition = null
}
})
return reload
})()
然后你可以调用reloadWithTurbolinks()
。
为了防止页面在滚动到所需位置时闪烁,请在页面的head
中添加no-preview
缓存指令:
<meta name="turbolinks-cache-control" content="no-preview">
已经有一段时间了,不确定您是否仍需要解决方案。您可以尝试这个方法,在加载页面内容之前和之后禁用/启用滚动:
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
var reloadWithTurbolinks = (function () {
var scrollPosition;
var focusId;
function reload() {
Turbolinks.visit(window.location.toString(), {action: 'replace'})
}
document.addEventListener('turbolinks:before-render', function () {
scrollPosition = [window.scrollX, window.scrollY];
focusId = document.activeElement.id;
});
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition);
scrollPosition = null
}
if (focusId) {
document.getElementById(focusId).focus();
focusId = null;
}
});
return reload;
})();
setInterval(function () {
reloadWithTurbolinks();
}, 3000);
<meta name="turbolinks-cache-control" content="no-preview">
。
setTimeout()
中,这样处理程序实际上会稍后执行,就像 Turbolinks 一样。代码:if (scrollPosition) { setTimeout(() => { window.scrollTo.apply(window, scrollPosition); scrollPosition = null }); }})
。 - xhafan