Question

我有一个脚本每隔20秒在我的网站上刷新一个Div。问题是，一旦刷新，它就会滚动到Div的to。我希望它保持在最后位置，而不是在刷新后滚动到顶部。有人可以看看这个剧本，也许可以指出我做错了什么？提前谢谢！

var time = new Date().getTime();

var refreshTime = 20*1000;

$(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {
    time = new Date().getTime(); 
});

var lastScrollPos = 0;

$('#feed1').on('scroll', function() {
    lastScrollPos = this.scrollTop;
});

function refresh() {

    if(new Date().getTime() - time >= refreshTime)

        $('#feed1').load(location.href="/dashboard" , function () {
            $(this).scrollTop(lastScrollPos);
        });

    else

        setTimeout(refresh, refreshTime);

}

setTimeout(refresh, refreshTime);

Answer 1

如果你location.href="/dashboard"，浏览器将丢弃所有页面的状态（包括脚本变量）并加载“/ dashboard”（将值赋给location.href与调用location.assign("/dashboard")相同）。

如果您有机会执行，jQuery load function可能甚至不需要您重新定位滚动偏移量！

尝试：

$('#feed1').load("/dashboard #feed1");

<强>更新

似乎jQuery的加载机制触发的HTTP请求在您的情况下收到截断的响应（内容长度：0）。

您必须将要保留的滚动位置放入localStorage。尝试：

var time = new Date().getTime();

var refreshTime = 20*1000;

$(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {
    time = new Date().getTime(); 
});

var previousScrollPos = localStorage.getItem("lastScrollPos");
if(previousScrollPos)
{
    $('#feed1').scrollTop(previousScrollPos);
    localStorage.removeItem("lastScrollPos");
}

function refresh() {

    if(new Date().getTime() - time >= refreshTime)
    {
        localStorage.setItem("lastScrollPos", $('#feed1').scrollTop());
        location.reload();
    }

}

setInterval(refresh, refreshTime);

我不是100％确定你想绑定到＃feed1的滚动事件或只是身体的滚动事件，我还没有看到你的页面。如果有人在新闻Feed上点击“加载更多”，那么在您重新加载页面后，这些其他项目将再次隐藏。根本不理想。

许多用户会讨厌定期重新加载页面，这也是一种可访问性失败，因为这会干扰屏幕阅读软件。在用户想要（而不是定期）时，在页面上放置刷新新闻源图标可能是一个更简单的想法，只需重新加载整个页面。

Answer 2

为什么不使用 feed1 div来加载仪表板内容并使用样式处理其位置。

#feed1 {
height: 150px;
overflow: auto;

}

在 feed1 div之外添加其他数据，因为加载方法将覆盖 feed1的内容。

如果您正在寻找类似的内容，请参阅此example，否则您可以修改此示例，以便其他人可以了解您的需求/方案。

自动刷新Div而不滚动到Div的顶部

2 个答案: