我希望能够在按下一个按钮,滚动到一个目标。我想是这样的。
<button (click)="scroll(#target)">Button</button>
在我component.ts的方法一样。
scroll(element) {
window.scrollTo(element.yPosition)
}
我知道,上面的代码是无效的,但只是为了显示我在想什么。我刚开始学角度4,具有角没有以往的经验。我一直在四处寻找这样的事情,但所有的例子都是在AngularJs其中很多不同,以4角
你可以做这样的:
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
然后在您的组件:
scroll(el: HTMLElement) {
el.scrollIntoView();
}
编辑:我看到的评论指出,这不再因元素是不确定的作品。我在角7创建StackBlitz example,它仍然有效。可有人请提供一个例子,其中它不工作?
我刚才用了jQuery找出元素(如的document.getElementById(...)),并使用.focus()调用来完成类似的东西,你在问什么。
您可以通过使用jQuery做到这一点:
TS码:
scrollTOElement = (element, offsetParam?, speedParam?) => {
const toElement = $(element);
const focusElement = $(element);
const offset = offsetParam * 1 || 200;
const speed = speedParam * 1 || 500;
$('html, body').animate({
scrollTop: toElement.offset().top + offset
}, speed);
if (focusElement) {
$(focusElement).focus();
}
}
HTML代码:
<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>
你要滚动元素应用此:
<div id="elementTo">some content</div>
Here是stackblitz样品。
这里是我是如何做到的采用了棱角分明4。
模板
<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>
这个功能添加到组件。
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}
其实还有就是要做到这一点,而无需使用setTimeout
或requestAnimationFrame
或jQuery的一个纯JavaScript的方式。
总之,找到您要滚动到滚动视图元素,并使用scrollIntoView
。
el.scrollIntoView({behavior:"smooth"});
这里是一个plunkr。
乔恩有正确的答案,这部作品在我的角度5个6个项目。
如果我想点击顺利地从导航栏到页脚滚动:
<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' });
}
因为我想回滚动到从页脚头,我创建了这个功能位于和它注入了导航栏和页脚组件和“头”或在需要的地方“页脚”通过了一项服务。只记得居然给组件声明中使用的类名:
<app-footer class="footer"></app-footer>
有点晚了这个晚会,但是我已经写了角4+,不只是这一个插件。它涵盖了你可能会碰到其他问题,比如服务器端呈现。您也可以到动画滚动到你的喜好。充分披露,我是作者。
NPM: @nicky-lenaers/ngx-scroll-to
GitHub: @nicky-lenaers/ngx-scroll-to
希望这可以帮助你!
在角7个作品完美
HTML
<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>
在组件
scroll(el: HTMLElement) {
el.scrollIntoView({behavior: 'smooth'});
}
在角可以使用ViewChild和ElementRef:给你的HTML元素参考
<div #myDiv >
和你的组件中:
import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;
您可以使用this.myDivRef.nativeElement去你的元素
另一种方式来做到这一点的角度:
标记:
<textarea #inputMessage></textarea>
加入ViewChild()属性:
@ViewChild('inputMessage')
inputMessageRef: ElementRef;
滚动任何你想用scrollIntoView()函数组件的内部:
this.inputMessageRef.nativeElement.scrollIntoView();
您可以通过使用下面的代码块滚动到你的视图的任何元素参考。注意目标(elementref ID)可以是任何有效的HTML标记。
在视图(HTML文件)
<div id="target"> </div>
<button (click)="scroll()">Button</button>
,在.ts文件,
scroll() {
document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}