滚动到 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 中的特定元素?
如何使用Java向下滚动到iOS中appium 1.6.4 beta中的确切元素