Question

scrollTop出现问题，部分问题可以解决。首先要使它起作用，我应用了发现的here.解决方案我有一个角度组件，使用* ngFor渲染其中的嵌套角度组件列表。片段如下（父母）：

<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
    <div *ngIf="accountsToggle">
        <div class="grid-x ruler">
            <div class="small-4 cell">
                <div class="text-left sub-header">Header 1</div>
            </div>
            <div class="small-1 cell">
                <div class="text-left sub-header">Header 2</div>
            </div>
            <div class="small-2 cell">
                <div class="text-center sub-header">Header 3</div>
            </div>
            <div class="small-2 cell">
                <div class="text-center sub-header">Header 4</div>
            </div>
            <div class="small-3 cell">
                <div class="text-center sub-header">Header 5</div>
            </div>
        </div>
        <div *ngFor="let data of displayAccounts">
            <member-product 
            [memberNumber]="mnum" 
            id={{data.accountNumber}} 
            (scrollIntoView)="scrollToView(data.accountNumber)"
                [product]="data" </member-product> 
            </div> 
        </div> 
    </div> 
</div>

孩子的html包含每个标头的信息，此外，最右边的省略号开关如下所示： screenshot of a single element（显然，我需要更多信誉点才能完全添加屏幕截图。希望仍然有帮助。）

问题：每次单击省略号都会展开帐户信息（注意：这不是另一个有角度的嵌套组件）以显示更多信息，并且所单击的帐户将自动滚动到顶部。 screenshot of expanded widget此功能适用于第一个帐户，因为考虑到可能有几十个甚至数百个，但只会在最后几个滚动失败，并且会逐渐失败，这意味着它将开始滚动到其顶部附近的位置直到最后一个根本不会滚动的项目为止。同样，当仅显示少量元素而不会导致y滚动时，它不会失败。

滚动代码：（您可能已经注意到，我在这里使用事件发射器）

scrollToView(accountNumber): void {
    var element = document.getElementById(accountNumber);
    var topPos = element.offsetTop;
    document.getElementById('scrollable-container').scrollTop = topPos - 10;
}

Css代码：

.scrollable {
    max-height: 24rem;
    position: relative;
}

我不太确定这是否是与y相关的问题。我对此完全感到困惑。在Stackoverflow中搜索此非常特殊的问题没有产生任何结果，尽管它不适用于我的angular 2场景，但它是jquery。

感谢您对此问题的见解或帮助。

当滚动到顶部的项目位于嵌套的最后或接近嵌套末端时，scrollTop的行为不正常

0 个答案: