如何在 Angular 2+ 中将滚动元素放入视口？

Question

这是一个例子

有一个包含项目列表的组件：

class HomeComponent {
    text = 'foo';
    testObject = {fieldFirst:'foo'};
    itemList = [
        '1', 
        '2', 
        '3', 
        '4',
        '5',
        '6',
        '7',
        '8 This one should be scrolled into viewport',
        '9',
        '10',
        '11',
        '12',
      ];

    scrollToElement() {
        // Do scroll there
    }
}

它的模板：

 <button (click)="scrollToElement()">Scroll To 8th Element</button>
 <div class="wrapper">
    <li *ngFor="let item of itemList">{{item}}</li>
 </div>

styles：

.wrapper {
    max-height: 300px;
    overflow-y: scroll;
}

如何将第 8 个元素滚动到“包装器”div 的视口中？

更新

这个答案并没有解决问题，因为问题不是如何让元素聚焦，问题是如何滚动到它。

Answer 1

您可以像这样向列表元素添加唯一 id：

<li *ngFor="let item of itemList; let i = index;" id="list-item-{{i}}">{{item}}</li>

然后你可以在click方法中找到元素，并使用一个叫做scrollIntoView()的方法； 像这样。

scrollToElement() {
    document.getElementById("list-item-7").scrollIntoView();
}

演示

Answer 2

在您的元素中添加 CSS 溢出：自动； 此属性在溢出-x 和溢出-y 中添加滚动。

例子

 const $btn = document.getElementById("btn") const $listItem = document.getElementById("element") $btn.addEventListener("click", function() { window.scrollTo(0, 4000) // Here yo calculate the position of your element })

 .list { overflow: auto; max-height: 200px; list-style-type: none }.list.list-item { margin: 0 0 5px 0; }.button { display: block; width: 200px; background: #e1e1e1; color: black; border-radius: 42px; padding: 14px; font-size: 16px; cursor: pointer; cursor: pointer }

 <button class="button" id="btn">Scroll to element</button> <ul class="list"> <li class="list-item">Test 1</li> <li class="list-item">Test 2</li> <li class="list-item">Test 3</li> <li class="list-item">Test 4</li> <li class="list-item">Test 5</li> <li class="list-item">Test 6</li> <li class="list-item">Test 7</li> <li class="list-item">Test 8</li> <li class="list-item">Test 9</li> <li class="list-item">Test 10</li> <li class="list-item">Test 11</li> <li class="list-item">Test 12</li> <li class="list-item" id="element">Test 13</li> <li class="list-item">Test 14</li> </ul>