javascript - 当列表元素高度改变时，Angular js 不滚动

Question

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

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

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

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

Controller 将包含如下扩展功能:

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 跳转。我想完全避免滚动。

有没有另一种简单的方法可以在 Angular 扩展元素时阻止滚动？

感谢帮助。

谢谢!

Answer 1

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