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

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

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

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

}

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

如果您正在寻找类似的东西，请参阅此example，否则您可以修改此示例，以便其他人可以理解您的要求/场景。

Answer 2

如果您执行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 的滚动事件还是仅绑定到正文的滚动事件，我还没有看到您的页面。如果有人在新闻提要上单击“加载更多”，则这些附加项目将再次隐藏，因为您正在重新加载页面。一点都不理想。

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