滚动到 web 中的特定元素

Posted 2023-03-05

【中文标题】滚动到 web 中的特定元素

【英文标题】：Scroll to a specific element in web the age

【发布时间】：2019-12-27 21:09:42

【问题描述】：

我有一个单选按钮列表，并希望动态滚动到此列表中的选定值：

我们无法在右侧列表中看到所选值，因为它位于列表底部：

这是我的模板：

<div class="radio" *ngFor="let kit of seasonKitOptions" >
    <label>
            <input
                type="radio"
                name=" homeOrAway -color-kit-option"
                [(ngModel)]="colorKit"
                [value]="kit"
                (ngModelChange)="onSeasonKitSelected($event)"
                #selectedKit
            />
             kit.season.name  - kit.name  - 
            <span class="color-box" [style.background-color]="kit.jersey_color"
                  [style.color]="kit.number_color">Jersey</span>
      </label>
</div>

提前感谢您的帮助。

【问题讨论】：

我想这可能已经在这里得到了回答：***.com/questions/43945548/… 和这里：***.com/questions/45742611/…

@chrismclarke 问题是我无法在模板中获得所选值的#target！在我在这里发布之前，我已经看到了那篇文章。

啊，好的，在这种情况下，您需要使用 viewChild，如下面的答案所述

【参考方案1】：

您可以使用“scrollIntoView”：

在模板中：

  <div #elem>This is the block where you want to scroll</div>

在组件中：

  @ViewChild('elem') elem: ElementRef; // elem is the element where you want to dynamically scroll to

然后在一些事件上：

  if (this.elem) 
      this.elem.nativeElement.scrollIntoView(behavior: 'smooth');
  

对于在 ngFor 中创建的动态元素，我认为我们可以设置唯一 ID，并在某些事件中使用它来滚动到该特定元素：

  document.querySelector(dynamicID).scrollIntoView(); 

【讨论】：

是的，但是如何根据我的模板获得elem？

我已经更新了我的答案。基本上你需要为你想要动态滚动的元素添加一个模板引用变量（在上面的例子中是'#elem'）

感谢您的更新。但主要问题是我如何从模板中获取#elem，因为我使用的是循环。

在这种情况下，为 ngfor 中的输入创建 id，然后在某些事件中将 id 传递给包含以下内容的函数：document.querySelector(dynamicID).scrollIntoView();

我得到了我现在必须做的事情，但是我正在努力创建将发送元素 ID 的事件，你能帮我吗？