DIV 的调整大小导致页面随机垂直滚动，已修复 Angular

Question

我正在使用 Angular UI 的 Collapse，我目前正在尝试修复一些关于自动滚动的问题。为了简化我的案例，想象一下有两个 DIV 一个在另一个之上。

用户可以折叠第一个 DIV，此时，我希望焦点位于第二个 DIV 之上。为此，我使用了 jQuery 的动画，但是在调用 animate 之后，DIV 的焦点被设置为某种随机位置。

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.isCollapsed = null;

  $scope.doCollapse = function() {
    $scope.isCollapsed = true;

    var $target = $('.tallDiv');
    $("body,html").animate({scrollTop: $target.offset().top}, "fast");
  }
});

使用下面的 link 进行测试： http://codepen.io/anon/pen/NqYQpa

当然，一个解决方案是删除 animate 部分。仅当您位于页面顶部时才可以正常工作，如果您已经向下滚动，则焦点仅设置为第二个的随机点 DIV 在第一个折叠后。

我想jQuery和Angular的交互不太好，有没有办法在Angular中做到这一点？

Answer 1

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.isCollapsed = null;

  $scope.doCollapse = function() {
    $scope.isCollapsed = true;

    var $target = $('.tallDiv');
    var $topDiv = $('.containerResizeDiv');
    $("body,html").animate({scrollTop: $target.offset().top - $topDiv.height()}, "fast");
  }
});

至于现在我按照quantum的建议解决了这个问题。在调用动画之前删除第一个 DIV 的高度。该解决方案适用于我的情况，但不是 100%，我发现了一些小故障。

显然 CSS 中存在一个 transitionend 事件，可以监听该事件以便在 Collapse 结束后启动滚动动画。但是我没有时间去探索那个。

DIV 的调整大小导致页面随机垂直滚动，已修复 Angular

Resize of DIV causes page to randomly vertically scroll, FIX for Angular

html

javascript

jquery

angularjs

angular-ui-bootstrap