html - 如何让页面滚动到较长文本中的特定单词

Question

我有一个很长的文本，并且希望(如果我之前选择了一个单词)页面在按下按钮后自动滚动到该元素。这个词所在的文本比这个长得多，我只是想证明我的问题。

<div (click)="scrollto()">scroll to word</div>
<div id="text">lsja dflkasjdf laksj dflkasj scrollhere saldfj asljfals dfalsjölas dfasjd fajsdlfa jsdldsa fasl falsd flasf</div>

.ts 文件:

scrollto() {
  const word = 'scrollhere';

我必须在 Typescript 代码中编写什么才能让页面滚动到单词“scrollhere”？

Answer 1

一种方法是将要滚动到的单词包装在 span 或其他语义元素中，以便您可以在 .ts 文件中引用它。像这样的事情:

<span #scrollHere>scrollhere</span>

然后在你的.ts中

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


scrollTo() {
  this.scrollHere.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
}