滚动到 web 中的特定元素

Posted

技术标签:

【中文标题】滚动到 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 的事件,你能帮我吗?

以上是关于滚动到 web 中的特定元素的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Unity UI 滚动到 ScrollRect 中的特定元素?

如何滚动到 UWP 中的元素

滚动到水平div中的元素

如何使用Java向下滚动到iOS中appium 1.6.4 beta中的确切元素

滚动到特定元素 Selenium WebDriver Java

如何使用 Infinite Scroll With Django 滚动到特定元素?