Question

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

我想要在HTML [style.border]="detailData.selected ? '2.5px solid #FD8023' : ''"中为true时，滚动将在此处滚动。却出来了错误

错误TypeError：“ document.querySelector（...）为空”

希望任何人都可以帮助我！

谢谢。

Answer 1

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

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

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

Answer 2

您没有正确的选择器，应为：

如果是班级

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

如果是ID

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

您可以了解有关querySelector here

的更多信息

根据评论进行更新

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

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

在您的组件中

@ViewChild('scrollableDiv') scrollableDiv: ElementRef;

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

错误：“ document.querySelector（...）为空”

2 个答案: