Question

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

元素1
element 2
element 3
element 4
element 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跳转。我想完全避免滚动。

当角度扩展元素时，还有另一种简单方法可以阻止滚动吗？

感谢帮助。

谢谢！

Answer 1

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

Answer 2

可能你必须保存滚动位置并在点击功能被触发后将滚动位置改回到保存状态。可能有轻弹效应。如果要隐藏轻弹效果，请使用慢动画隐藏div节目。希望它有所帮助。

当列表元素高度更改时，角度js不会滚动

2 个答案: