第一次指定滚动条位置

Question

我正在使用滚动并尝试通过给定的id在特定元素处启动它。

我的HTML看起来像：

<div class="list-wrapper" style="max-height:350px;overflow-y:scroll" >
   <div *ngFor="let el of elements">
     <div class="text-center" id="element_{{el.id}}"
        {{el.lebel}}
     </div>
   </div>
 </div>

在我的组件中

Future ngOnInit() async{
    await _apiService.getElements().then((resp){
    list = resp;
 });
 scrollToLastElement();
}

我的scrollToLastElement方法

void scrollToLastElement(){
    var wrapper = querySelector('.list-wrapper');
    Timer.run(() => wrapper?.scrollTop = wrapper?.scrollHeight);
}

但滚动始终指向第一个。有什么建议 ？

Answer 1

您可以使用element.scrollTop和element.scrollLeft分别获取已滚动的垂直和水平偏移。如果你关心整个页面，element可以是document.body。如果需要百分比，可以将它与element.offsetHeight和element.offsetWidth（再次，元素可能是正文）进行比较。

参考：How to get scrollbar position with Javascript?

Answer 2

运用

new Future.delayed(const Duration(seconds:1), () {});

而不是Timer.run((){});将解决它。

谢谢你们。

Answer 3

我想你需要：

Future ngOnInit() async{
    await _apiService.getElements().then((resp){
    list = resp;
    scrollToLastElement();
    });
}

这应该可以在不更改滚动功能的情况下工作，就像在solution中一样，它在1秒后执行滚动功能。一秒钟通常足以让apiService响应。但是如果它需要更长的时间，你的滚动将无法工作，因为那时元素将不会被填充。