列表元素高度更改时Angular js不滚动答案

【问题标题】：Angular js do not scroll when list element height change列表元素高度更改时Angular js不滚动
【发布时间】：2015-05-07 05:07:48
【问题描述】：

我有一个元素列表。每个元素都有展开和折叠状态。当用户展开其中一个元素时，所有其他元素都需要折叠。该列表位于一个 div 中，可以滚动查看整个列表。

元素 1
元素 2
元素 3
元素 4
元素 5

可以说，元素 1 处于展开状态。当我展开元素 3 时，我折叠元素 1。问题是当我这样做时，元素 3 向上滚动。我想避免这种情况并将元素 3 定位到相同的位置。

这是一个伪代码。可能会有一些小的语法错误，但请忽略它们，因为我的实际代码还有很多事情要做，我不想在这里粘贴整个内容。

控制器将包含如下扩展功能：

public expandElement(currentElement: any, previousElement: any) {

 // get the height of previous element 
  var scrollOffset: number = angular.element("#" + this.getAnchorId(previousElement).offsetHeight;

  // this function will collapse the element decreasing the height of it
  previousElement.collapse();

  // scroll to the newly expanded element
  this.$timeout(() => {
    var anchorId: string = this.getAnchorId(element);
    var element = angular.element("#" + anchorId)[0];
    var offset = element.getBoundingClientRect().top + scrollOffset;
    this.$anchorScroll.yOffset = offset;
    this.$location.hash(anchorId);
    this.$anchorScroll();
  });

   previousElement = currentElement;
}

html 看起来像：

 <div ng-repeat="element in listElements"
   id="{{getAnchorId(element)}}">

   <my-directive ng-click="expandElement(element, previousElement)"></my-directive>
   </div>

目前这根本不起作用，但即使我让它起作用，也可能会发生一个小的 UI 跳转。我想完全避免滚动。

当角度扩展元素时，是否有另一种简单的方法来阻止滚动？

感谢您的帮助。

谢谢！

【问题讨论】：

你需要发布你的代码:-)

标签： javascript jquery html css angularjs

【解决方案1】：

我有你的问题，但我有一个问题。考虑到列表中有更多元素，并且您将展开说第 50 个元素，然后它必须滚动主容器以显示该扩展面板的内容，我认为这是滚动中所需的功能。我知道我不是在回答你的问题，只是想重新考虑一下。

【讨论】：

【解决方案2】：

可能您必须保存滚动位置，并在触发点击功能后将滚动位置更改回保存状态。可能会有轻弹效果。如果要隐藏轻弹效果，可以用慢速动画隐藏 div 显示。希望对您有所帮助。

【讨论】：