我有一个网页,每次刷新时都会动态加载。例如,如果用户正在编辑网页中的条目,则钻取链接。然后尝试按下后退按钮,或者点击与上一页对应的选项卡,如何保存垂直滚动条位置并在单击后退按钮或 时将它们返回到相同位置标签对应于同一页面。
我试过这个,但它只适用于非动态加载的页面。 How can I retain the scroll position of a scrollable area when pressing back button?
最佳答案
您可以在您链接的问题中使用相同的功能,但监听滚动事件而不是页面卸载事件。这样滚动位置将在用户每次滚动时更新和存储。
由于页面是动态加载的,您可以在内容加载后触发一个事件,这将导致页面滚动:
$.get('/resource').done(function(){
// Render...
// Add a trigger after the content is loaded and rendered
$(window).trigger('content:loaded');
}
var prevScrollHorizontal = 0;
var prevScrollVertical = 0;
$(function() {
$("div#element").scroll(function() { // Listens for scroll events
var currentHorizontal = $(this).scrollLeft();
var currentVertical = $(this).scrollTop();
if(prevScrollHorizontal != currentHorizontal) {
prevScrollHorizontal = currentHorizontal;
localStorage.setItem("scrollPositionHorizontal", currentHorizontal);
// Scrolled horizontally
}
if(prevScrollVertical != currentVertical) {
prevScrollVertical = currentVertical;
localStorage.setItem("scrollPositionVertical", currentVertical);
// Scrolled vertically
}
});
// Listen for the 'content:loaded' event triggered above
$(window).on('content:loaded', function() {
if(localStorage.scrollPositionVertical) {
$("div#element").scrollTop(localStorage.getItem("scrollPositionVertical"));
}
if(localStorage.scrollPositionHorizontal) {
$("div#element").scrollLeft(localStorage.getItem("scrollPositionHorizontal"));
}
});
});
您可以使用 window.location.pathname 值来分隔不同的存储滚动对象以区分它们:
$(function() {
$(window).scroll(function() { // Listens for scroll events
var scrollPosition = $("div#element").scrollTop();
// Uses the pathname to set the scroll value
localStorage.setItem("scrollPosition_"+window.location.pathname, scrollPosition);
});
if(localStorage.scrollPosition) {
// Uses the pathname to get the scroll value
$("div#element").scrollTop(localStorage.getItem("scrollPosition_"+window.location.pathname));
}
});
关于javascript - 返回到动态大小页面上的滚动条位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38313840/