1

我正在尝试将 scrollIntoView() 用于我的 Angular 2 项目。我有一个带有溢出的容器 div，当数据到达组件时它会增长，我需要在数据到达时滚动到 div 的底部。如果我使用一个按钮并通过它传递引用，这工作正常。

例子：

<div class="container">
<button (click)="scrollTo(target)"></button>
-----
-----
<!-- Dynamic content here -->
-----
-----
<div #target class="target" id="target"></div>

在组件中：

public scrollTo(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
}

问题是我不想使用按钮，我需要在组件内调用 scrollTo 函数。我曾尝试使用 @ViewChildren、document.querySelector 和 document.getElementById，但没有任何效果。

例子：

1)

@ViewChildren('target') target: ElementRef;

在函数中：

public scrollTo() {
    this.target.nativeElement.scrollIntoView({behavior: 'smooth'});
}

2)

public scrollTo() {
    let element = document.getElementById('target');
    element.scrollIntoView({behavior: 'smooth'});
}

3)

public scrollTo() {
    let element = document.querySelector('.target');
    element.scrollIntoView({behavior: 'smooth'});
}

在所有情况下，如果我通过控制台打印元素，结果都是一样的：

<div class="target" id="target" _ngcontent-ema-86=""></div>

但是滚动只能通过按钮滚动到容器 div 的底部。

附加数据：该项目是 PowerPoint 的 VSTO 加载项，它应该在 IE11 上运行。谢谢你的帮助。

4

2 回答 2

0

可能是由于 IE11 中的平滑行为支持导致的问题。你试过没有它吗？

在此处输入图像描述

于 2020-03-31T00:16:27.797 回答
-1

你需要使用ViewChildnot ViewChildren。ViewChild当您想从模板访问单个元素时使用。ViewChildren当模板中有多个具有相同 id ( #target) 的元素时使用。后者会给你一个数组。

试试这个。

@ViewChild('target', { static: true }) target: ElementRef;

public scrollTo() {
    this.target.nativeElement.scrollIntoView({behavior: 'smooth'});
}

查看文档以获取有关ViewChild.

于 2020-03-31T00:06:18.263 回答