Internet Explorer 中的可滚动元素不记得 ng-show 的最后位置

Question

ng-show 元素内的可滚动内容忘记了 Internet Explorer 中的滚动位置，但在 Firefox 中没有。

运行 Internet Explorer 和 Firefox 中的 Plunker to describe the issue。你会得到不同的结果。

有人知道为什么吗？

Answer 1

我可以建议以下解决方法 - 在控制器上保存位置状态并使用它来重置位置：

  $scope.position = "top"; // Default location of the list
  $scope.show = true;

  $scope.gotoBottom = function() {
    $location.hash('bottom');
    $scope.position = "bottom"; // save the current position 
    $anchorScroll();
  };

  $scope.gotoTop = function() {
    $location.hash('top');
    $scope.position = "top"; // save the current position 
    $anchorScroll();
  };

  $scope.toggleShow = function() {
    $scope.show = !$scope.show;
    if( $scope.position == "bottom" ) { // If position is "bottom" call "$scope.gotoBottom()" to reset the position
      $timeout(function() { // The code is inside "$timeout" to allow the view to render before updating the location
        $scope.gotoBottom();
      });
    }
  };

并在视图中更改 showing/hiding 列表的方式：

<button ng-click="toggleShow()">{{show ? 'Show' : 'Hide'}}</button>

并且不要忘记将 $timeout 注入您的控制器：

.controller('ScrollController', ['$scope', '$location', '$anchorScroll', '$timeout',
function ($scope, $location, $anchorScroll, $timeout) {

这是一个工作示例 - http://plnkr.co/edit/oXKpmwQtV8ICRvGNeQby?p=preview

Answer 2

使用 css visibility : hidden 而不是来自 @Alon Etian 的 link IE10 reset the scrollbars (position to top-left) for a block (overflow:auto) after {display:none, display:block} sequence 在他的评论中的 ng-show 线索解决。

Plunkr that solves this

Internet Explorer 中的可滚动元素不记得 ng-show 的最后位置

Scrollable element in Internet Explorer does not remember last position with ng-show

angularjs

ng-show