Question

错误：“document.querySelector(…) 为空”

2019-09-11

1075

angular typescript

我卡在这里 setTimeout(() => document.querySelector('true').scrollIntoView());

我希望当 html 中的 [style.border]="detailData.selected ? '2.5px solid #FD8023' : ''" 为真时，滚动将滚动到这里。但它会出现错误

ERROR TypeError: "document.querySelector(...) is null"

希望有人能帮助我！

提前致谢。

Answer 1

您必须使用正确的语法（并建议避免使用 setTimeout ）：

document.querySelector(".myclass")
document.querySelector("div")
document.querySelector("#id")

您还必须知道， scrollIntoView() 方法不是完全跨浏览器的解决方案（超过一半的浏览器不支持使用此方法进行 smooth 滚动）。更多详细信息： https://caniuse.com/#search=scrollIntoView

Answer 2

您的选择器不正确，它应该是这样的：

如果是 class

setTimeout(() => document.querySelector('.true').scrollIntoView());

如果是 id

setTimeout(() => document.querySelector('#true').scrollIntoView());

您可以在此处

根据评论更新

最好使用模板变量并使用 Angular 来查找视图，如下所示：

<div #scrollableDiv [id]="detailData.key"></div>

在您的组件中

@ViewChild('scrollableDiv') scrollableDiv: ElementRef;

setTimeout(() => {
  this.scrollableDiv.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
});