Question

我在angularjs app中滚动时出现问题。

目前它有2页：第一页是客户列表，您可以选择其中一个并查看其详细信息。第二个是公司列表，它的工作方式相同。

我使用面板使用$location.path()在它们之间导航。该应用还有一个后退按钮，使用$window.history.back()。

当您选择客户或公司列表中的某个项目，然后按下该按钮后，您将返回上一页（客户或公司列表）并恢复滚动位置。我使用的是标准$window.history.back()功能，未实现任何自定义功能。

但问题出现在哪里：如果没有向任何方向滚动只需转到另一个页面（到其他项目列表）滚动位置不会重置。但如果你只是稍微滚动一下，它的位置就会重置。此外，如果你不使用后退按钮，一切正常。

所以，问题是：在使用$window.history.back()后转到其他页面时，我们如何重置滚动位置？

我还使用infinite-scroll插件，如果重要的话。但即使我关闭它，也没有任何改变，所以我猜问题不在于插件。

Answer 1

我在前一段时间遇到过类似问题，并提出简单（但不是优雅的解决方案）。

当视图改变时，我在范围内存储了包装器scrolltop值。当我回去时，我再次在包装上应用了这个值。

实际上，我不记得它在后面的broswer按钮中的行为方式。你需要检查一下。

更改视图并存储scrollTop值 https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js#L20

angular.extend($scope.view, {
    panel: false,
    section: 'single',
    single: el,
    scrollPosition: $('#thumbs').scrollTop()
});

返回并重新应用scrollTop值 https://github.com/jedrzejchalubek/Reed/blob/master/src/app/directives/back-to-list.js#L14

scope.$apply(function() {
    scope.view.section = 'list';
    scope.view.panel = false;
});
$('#thumbs').scrollTop( scope.view.scrollPosition );

项目在github上，所以你可以扫描它。也许这有帮助。 https://github.com/jedrzejchalubek/Reed

Answer 2

如果这些控制器包含在Immediately Invoked Function Expression中，您可以通过在控制器启动时触发函数来捕获重新加载事件。像这样：

(function() {


 angular.module("pstat")
         .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
  function homeCtrl ($log, dataService, localStorageService, $http) {
    var vm = this;
    $(document).getElementById("yourId").scrollTop(0);

  });
})()

这将强制页面在初始化控制器时具有0垂直滚动偏移量，在此页面上登陆的$ window.history.back事件中为I.E.

Answer 3

这是我从AngularJS教程中添加到着名的phonecatApp中的工作原理：

console.log($('.pl-video').attr('data-video-id'));
console.log($('.pl-video').attr('data-title'));

按下后退按钮后转到其他页面时，滚动位置不会重置

3 个答案: