ASP.NET MVC前端页面切换时缓存滑轮定位

首先，简单描述一下在项目中碰到的问题场景，在项目中移动报销有一个待办流程列表，如下图

点击进去跳转到单据详情，可进行各种审批操作，如图

审批操作完成后跳转回待办流程列表，并刷新列表数据。目前的界面是操作完成后回到待办流程页面会刷新整个页面，列表锚点位置和滚轮都会回到最顶端。而这涉及到客户的一个需求，就是客户希望在审批完成或者取消审批后，回到待办流程列表时，能保留点击前的列表位置。其实这个需求在移动端还是蛮常见的，在一些前端列表应用经常会有，最常见的做法是把跳转前的页面进行缓存起来，在其他页面操作完成后返回原界面时，再加载之前缓存的数据。

但是这个需求有点特殊，就是如果在详情页面进行了单据审批操作，实际上回到单据列表时还是需要重新获取数据，才能刷新单据列表状态，这样的话跳转前的列表数据缓存就没有很大意义，只需要在跳转前缓存页面的滑轮位置即可，跳转回来后再取回跳转前的滚轮位置。

在JS中使用 document.documentElement.scrollTop 可获取当前页面滚轮的位置，使用sessionStorage或localstroge 可进行数据存储，sessionStorage是当前页面存储，localstroge是全局存储，我在这里用的是：

单据详情页面回到待办列表时获取滚轮位置存储，并赋值当前页面，在这里有一个需要注意的地方，就是由于该列表我使用的是 vant 的 list 组件，list 加载数据是异步分段加载的，所以必须要在list数据加载完成后才设置页面的滚轮位置，不然会出现不生效的情况。

list的加载方法会执行多次，当最后一次设置完成后，就清除滚轮位置缓存。最好设置一些标志判断，保证当前页面不会进行不必要的滚轮位置缓存定位。

这里只是切换页面时滚轮位置的简单缓存，如果想缓存当前页面的其他数据，可以使用MVC的输出缓存OutputCache，前端vue中可以使用keep-alive来缓存某个组件。这里就不再赘述。