如何在 MVC 中保持滚动位置?

新手上路,请多包涵

我在 MVC 中从事一个项目,并且很喜欢学习它。有一些成长的烦恼,但一旦你弄清楚它们就不错了。在 WebForms 世界中真正简单的一件事是维护页面上的滚动位置。您所做的只是将 MaintainScrollPositionOnPostback 属性设置为 true。但是,在 MVC 中,我没有使用回发,所以这对我不起作用。处理这个问题的标准方法是什么?

编辑: Ajax 是可以接受的,但我也想知道如果没有 AJAX,您将如何做。

原文由 Papa Burgundy 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 301
2 个回答

MaintainScrollPositionOnPostback 的工作方式是它有一对隐藏字段:__SCROLLPOSITIONX 和 __SCROLLPOSITIONY

在回传中,它设置这些,

 function WebForm_GetScrollY() {
    if (__nonMSDOMBrowser) {
        return window.pageYOffset;
    }
    else {
        if (document.documentElement && document.documentElement.scrollTop) {
            return document.documentElement.scrollTop;
        }
        else if (document.body) {
            return document.body.scrollTop;
        }
    }
    return 0;
}

function WebForm_SaveScrollPositionSubmit() {
    if (__nonMSDOMBrowser) {
        theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
        theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
    }
    else {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    }
    if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
        return this.oldSubmit();
    }
    return true;
}

然后它调用 RestoreScrollPosition:

 function WebForm_RestoreScrollPosition() {
    if (__nonMSDOMBrowser) {
        window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
    }
    else {
        window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
    }
    if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
        return theForm.oldOnLoad();
    }
    return true;
}

但正如大多数人所说,无论如何 MVC 都应该避免回发。

原文由 Richard Gadsden 发布,翻译遵循 CC BY-SA 4.0 许可协议

我已经在 JS 中解决了这个问题:

 $(document).scroll(function () {
  localStorage['page'] = document.URL;
  localStorage['scrollTop'] = $(document).scrollTop();
});

然后准备好文档:

 $(document).ready(function () {
  if (localStorage['page'] == document.URL) {
    $(document).scrollTop(localStorage['scrollTop']);
  }
});

原文由 Madagaga 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题