如何在点击时将元素滚动到视图中

我在Ionic2中寻找类似于scrollIntoView()的东西，例如，当我点击一个按钮时使用它。如何在点击时将元素滚动到视图中

在ion-content中详细描述的方法都没有帮助。

2016-09-08 user1275105

可以使用scrollTo(x,y,duration)方法(docs)。代码非常简单，首先我们获取目标元素的位置（在这种情况下为<p></p>），然后我们在scrollTo(...)方法中使用它。首先查看：

<ion-header> 
    <ion-navbar primary> 
    <ion-title> 
     <span>My App</span> 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <button ion-button text-only (click)="scrollElement()">Click me</button> 

    <div style="height: 600px;"></div> 

    <!-- Notice the #target in the p element --> 
    <p #target>Secret message!</p> 

    <div style="height: 600px;"></div> 

</ion-content>

和组件代码：

import { ViewChild, Component } from '@angular/core'; 
import { NavController, Content } from 'ionic-angular'; 

@Component({ 
    templateUrl:"home.html" 
}) 
export class HomePage { 
    @ViewChild(Content) content: Content; 
    @ViewChild('target') target: any; 

    constructor() { } 

    public scrollElement() { 
    // Avoid reading the DOM directly, by using ViewChild and the target reference 
    this.content.scrollTo(0, this.target.nativeElement.offsetTop, 500); 
    } 
}

来源

2016-09-09 07:44:17 sebaferreras

的链接plunker没有按似乎没有显示与答案有关的任何内容。 – Willwsharp

我很抱歉@Willwsharp，闯入者使用了旧版本的Ionic。我今天晚些时候会创建一个新的重击器:) – sebaferreras

@Willwsharp我已经更新了答案，以避免直接读取DOM。现在它使用'ViewChild'来获取HTML元素的引用 – sebaferreras

我会使用HTML中的安克链接。

只要给elemnt和id =“scrollXYZ”和包裹按钮在

例子：

<a href="#scrollXYZ"><button>Example</button></a> 
<div id="scrollXYZ"><h2>Scroll to this</h2></div>

来源

2016-09-09 07:55:22

如果元素是动态添加的，这将不起作用 – Mackelito

@Mackelito它会动态地添加scrollTo。 –

我注意到上述溶液不与角通用服务器端渲染很好地工作（SSR）由于document服务器端不可用。

因此，我写了一个方便的插件来实现滚动到角4+与AoT工作，SSR

元素NPM
ngx-scroll-to

GitHub的
ngx-scroll-to

来源

2017-07-20 14:06:18 Nicky

如何在点击时将元素滚动到视图中

回答

相关问题