滚动到单击角度4的元素

我希望能够滚动到一个目标时，按下按钮。我是这么想的。

<button (click)="scroll(#target)">Button</button>

在我的 component.ts中。

scroll(element) {
window.scrollTo(element.yPosition)
}

我知道上面的代码是无效的，但只是显示我在想什么。我刚刚开始学习角度4以前没有经验的角度。我一直在寻找这样的东西，但所有的例子都是 AngularJ，这与 Angulal4有很大的不同

296649 次浏览
小开

你可以这样做:

<button (click)="scroll(target)">Scroll To Div</button>
<div #target>Your target</div>

然后在你的部分:

scroll(el: HTMLElement) {
el.scrollIntoView();
}

编辑: 我看到一些注释说，由于元素未定义，这种方法不再有效。我在角度7创建了一个 StackBlitz 的例子，它仍然可以工作。有人能举个例子吗？

小开

实际上，有一种纯粹的 javascript 方法可以不使用 setTimeout、 requestAnimationFrame或 jQuery 来实现这一点。

简而言之，在 scrollView 中找到要滚动到的元素，并使用 scrollIntoView。

el.scrollIntoView({behavior:"smooth"});

这是 噗通。

小开

乔恩有正确的答案，这工程在我的角度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' });
}

因为我想从页脚向后滚动到页眉，所以我创建了一个函数所在的服务，并将其注入到导航栏和页脚组件中，然后在需要的地方传递“ header”或“ footer”。只要记住实际上给组件声明使用的类名:

<app-footer class="footer"></app-footer>
小开

下面是我如何使用角度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();
}
小开

您可以通过使用 jquery 来实现这一点:

密码:

    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>

这里 是一个 stackblitz 示例。

小开

另一种角度的方法是:

标价:

<textarea #inputMessage></textarea>

添加 ViewChild()属性:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

使用 scrollIntoView()函数在组件内部滚动任意位置:

this.inputMessageRef.nativeElement.scrollIntoView();
小开

角度13完美

超文本标示语言

<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></div>

以及组件内部:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

您可以使用 this.myDivRef.nativeElement来访问元素

小开

可以使用下面的代码块滚动到视图上的任何元素引用。 注意，目标 (elementref id)可以位于任何有效的 html 标记上。

在视图(html 文件)上

<div id="target"> </div>
<button (click)="scroll()">Button</button>

在 .ts文件上,

scroll() {
document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
小开

可以通过以下方式引用角度 DOM 元素来实现这一点:

下面是 Stackblitz中的例子

组件模板:

<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>
小开

我需要这样做，可能是因为我使用了一个自定义的 HTML 元素, onItemAmounterClick中的 target不会有 scrollIntoView方法

Html

<div *ngFor"...">
<my-component #target (click)="clicked(target)"></my-component>
</div>

. ts

onItemAmounterClick(target){
target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}
小开

如果卷轴走得太远

获取正确的 y 坐标，并使用 window.scrollTo ({ top: y，action: ‘ shine’})

如果使用多个元素，则设置不同的 y 坐标

HTML 文件

<div class="sub-menu">
<button (click)="scroll('#target1', -565)">Target One</button>
<button (click)="scroll('#target2', -490)">Target Two</button>
</div>


<div>
<div id="target1">Target One</div>
</div>


<div>
<div id="target2">Target Two</div>
</div>

文件

  scroll(elem: string, offset: number) {
const yOffset = offset;
const element = document.querySelector(elem)!;
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;


window.scrollTo({ top: y, behavior: 'smooth' })
}
小开

首先，我尝试了最简单的解决方案，即使用诸如 Element.scrollIntoView()或

document.getElementById("<yourTarget>").scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});

(记住在要滚动的位置添加 id="<yourtarget>") 它可以用于开发，并且非常简单，但是在部署到生产环境之后，我注意到滚动条无法工作！

因此，我尝试了另一种方法，使用 Angular 的 ViewportScroll。 为此，您必须在 Component 的构造函数(如 constructor(private scroller: ViewportScroller))中注入 ViewportScroll，然后调用 this.scroller.scrollToAnchor("<yourTarget>");。再一次，没什么大不了的，再一次，它不是工作在生产环境。

第三种方法是使用路由器为我想要的锚提供导航。与上一个选项类似，将路由器注入到构造函数，如

constructor(private router: Router)，并使用以下命令: this.router.navigate([], { fragment: "<yourTarget>" }); 最后，它确实工作在生产环境！我不知道为什么以前的方法失败了，我读了一些来源说，角材料块滚动，但我不确定。

为了呈现不同的选项，有一个 Stackblitz 作为示例。

Https://stackblitz.com/edit/scrolling-types

在那里你可以点击树形按钮，每个按钮使用不同的方法向下滚动到一些锚。

小开

对我来说，顶部的答案移动了我的整个组件，导致页面的区域被封锁。我通过添加一些额外的属性来修复它

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

提交答案