Javascript 在 Angular 4 中单击时滚动到元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43945548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to element on click in Angular 4
提问by Frank Modica
I want to be able to scroll to a target when a button is pressed. I was thinking something like this.
我希望能够在按下按钮时滚动到目标。我在想这样的事情。
<button (click)="scroll(#target)">Button</button>
And in my component.ts a method like.
在我的 component.ts 中，有一个类似的方法。
scroll(element) {
window.scrollTo(element.yPosition)
}
I know that the code above is not valid but just to show what I was thinking. I've just started to learn Angular 4 with no previous experience of Angular. I've been searching around for something like this but all the examples are in AngularJs which differs alot to Angular 4
我知道上面的代码无效，只是为了表明我的想法。我刚刚开始学习 Angular 4，之前没有 Angular 的经验。我一直在寻找类似的东西，但所有的例子都在 AngularJs 中，它与 Angular 4 有很大不同
回答by Frank Modica
You could do it like this:
你可以这样做：
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
and then in your component:
然后在您的组件中：
scroll(el: HTMLElement) {
el.scrollIntoView();
}
Edit:I see comments stating that this no longer works due to the element being undefined. I created a StackBlitz examplein Angular 7 and it still works. Can someone please provide an example where it does not work?
编辑：我看到评论指出由于未定义元素，这不再有效。我在 Angular 7 中创建了一个StackBlitz 示例，它仍然有效。有人可以提供一个不起作用的例子吗？
回答by Jon
There is actually a pure javascript way to accomplish this without using setTimeoutor requestAnimationFrameor jQuery.
实际上有一种纯 javascript 方法可以在不使用setTimeoutorrequestAnimationFrame或 jQuery 的情况下完成此操作。
In short, find the element in the scrollView that you want to scroll to, and use scrollIntoView.
简而言之，在 scrollView 中找到要滚动到的元素，然后使用scrollIntoView.
el.scrollIntoView({behavior:"smooth"});
el.scrollIntoView({behavior:"smooth"});
Here is a plunkr.
这是一个plunkr。
回答by LH7
here is how I did it using angular 4.
这是我如何使用 angular 4 做到的。
Template
模板
<div class="col-xs-12 col-md-3">
<h2>Categories</h2>
<div class="cat-list-body">
<div class="cat-item" *ngFor="let cat of web.menu | async">
<label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
</div>
</div>
</div>
add this function to the Component.
将此功能添加到组件中。
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}
回答by Robert S.
In angular 7 works perfect
在 angular 7 中工作完美
HTML
HTML
<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>
In component
在组件中
scroll(el: HTMLElement) {
el.scrollIntoView({behavior: 'smooth'});
}
回答by Stephen E.
Jon has the right answer and this works in my angular 5 and 6 projects.
Jon 有正确的答案，这适用于我的 angular 5 和 6 项目。
If I wanted to click to smoothly scroll from navbar to footer:
如果我想单击以从导航栏平滑滚动到页脚：
<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>
scrollTo(className: string):void {
const elementList = document.querySelectorAll('.' + className);
const element = elementList[0] as HTMLElement;
element.scrollIntoView({ behavior: 'smooth' });
}
Because I wanted to scroll back to the header from the footer, I created a service that this function is located in and injected it into the navbar and footer components and passed in 'header' or 'footer' where needed. just remember to actually give the component declarations the class names used:
因为我想从页脚滚动回页眉，所以我创建了一个该函数所在的服务，并将其注入导航栏和页脚组件，并在需要的地方传入“页眉”或“页脚”。只记得给组件声明实际使用的类名：
<app-footer class="footer"></app-footer>
回答by Schnapz
Another way to do it in Angular:
在 Angular 中执行此操作的另一种方法：
Markup:
标记：
<textarea #inputMessage></textarea>
Add ViewChild() property:
添加 ViewChild() 属性：
@ViewChild('inputMessage')
inputMessageRef: ElementRef;
Scroll anywhere you want inside of the component using scrollIntoView() function:
使用 scrollIntoView() 函数在组件内滚动到您想要的任何位置：
this.inputMessageRef.nativeElement.scrollIntoView();
回答by Ifesinachi Bryan
You can scroll to any element ref on your view by using the code block below. Note that the target (elementref id) could be on any valid html tag.
您可以使用下面的代码块滚动到视图上的任何元素引用。请注意，目标(elementref id) 可以位于任何有效的 html 标签上。
On the view(html file)
在视图上（html 文件）
<div id="target"> </div>
<button (click)="scroll()">Button</button>
on the .ts file,
在 .ts 文件上，
scroll() {
document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
回答by Andres Gardiol
You can achieve that by using the reference to an angular DOM element as follows:
您可以通过使用对 angular DOM 元素的引用来实现这一点，如下所示：
Here is the example in stackblitz
这是stackblitz中的例子
the component template:
组件模板：
<div class="other-content">
Other content
<button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
Click to scroll
</button>
</div>
<div id="content" #element>
Some text to scroll
</div>
回答by M.Amer
in angular you can use ViewChild and ElementRef: give your html element a ref
在 angular 你可以使用 ViewChild 和 ElementRef: 给你的 html 元素一个 ref
<div #myDiv >
and inside your component:
并在您的组件内：
import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;
you can use this.myDivRef.nativeElement to get to your element
您可以使用 this.myDivRef.nativeElement 来访问您的元素
回答by Kenneth Salomon
I have done something like what you're asking just by using jQuery to find the element (such as document.getElementById(...)) and using the .focus() call.
我已经通过使用 jQuery 查找元素（例如 document.getElementById(...)）并使用 .focus() 调用完成了类似于您所要求的操作。
