Question

我维护一个网站，其中包含大量基于角色的动态内容，这些内容会显示在滚动Feed中。一次显示十个帖子，无限滚动机制允许用户向下滚动并加载更多内容。

我被要求制作它，以便当用户点击内容，然后最终点击后退按钮（不，这不是单页应用程序）时，滚动状态将恢复为用户之前在点击链接之前的位置。

在具有Angular数据绑定提供的动态内容的网站上，这是否可行？当然，内容将重建为与以前相同或多或少相同。是否有规范或推荐的方法来做到这一点？

Answer 1

将滚动条目存储在服务中：当用户离开页面时，数据不会随控制器一起被销毁。然后你不需要再次加载所有项目：当用户按下后退按钮并再次初始化控制器时，你可以让它显示内容并滚动到底部（或其他地方......）

myModule.factory( 'service', function(){
 var Service = {
   listOfItems : [],
   positionOfScroll: ''
 }
 return Service;
})

.controller( 'controller', function( Service ){
 $scope.Service = Service;

 $location.hash( Service.positionOfScroll );
 $anchorScroll();

 // all your logic manipulating Service.listOfItems instead of $scope.listOfItems
 // when user scolls, Service.positionOfScoll is updated

});

模板：

<div ng-repeat=" item in Service.listOfItems ">{{ item.name }}</div>

Answer 2

可悲的是，如果不使用像LocalStorage这样的东西，这是不可能的。用户离开您的网页后，您的数据就会消失。

您可能需要查看Github上的以下项目：https://github.com/grevory/angular-local-storage

祝你好运！

从Angular App中的上一页加载恢复滚动位置

2 个答案: