Question

我在Ionic2中寻找类似于scrollIntoView()的东西，以便在我点击按钮时使用。

ion-content中详述的所有方法都没有帮助。

Answer 1

您可以使用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);
  }
}

Answer 2

我在HTML中使用anker链接。

只需给出elemnt和id =＆＃34; scrollXYZ＆＃34;并将按钮包装在

中

示例：

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

Answer 3

我注意到由于document无法在服务器端可用，上述解决方案无法与Angular Universal服务器端呈现（SSR）配合使用。

因此，我编写了一个方便的插件来实现滚动到Angular 4+中与AoT和SSR

一起使用的元素

NPM
ngx-scroll-to

的GitHub
ngx-scroll-to

Answer 4

我试图在Ionic 3中执行此操作，原因是<Element>.offsetTop返回10（元素顶部的填充）而不是到页面顶部的距离（更大的未知数），我最终只使用了<Element>.scrollIntoView()，对我来说效果很好。

要获取<Element>对象，我使用了document.getElementById()，但是还有很多其他方法可以获取该对象的句柄。

Answer 5

对于Ionic-4，使用的术语有多种变化

内容已更改为 IonContent
scrollTo 更改为 scrollToPoint
离子角度已更改为 @ ionic / angular
viewChild必须具有 {static：false} //仅当您使用> 8.0角度时

以下是对ionic-4可接受答案的代码修改

<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(target)">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 { IonContent } from '@ionic/angular'; // change-1

@Component({
  templateUrl:"home.html"
})
export class HomePage {
   @ViewChild('target', { static: false }) target: ElementRef;
   @ViewChild('ion_content', { static: false }) ionContent: IonContent; //change-2 for angular > 8.0 remove this for angular 6.x

  constructor() {   }

  public scrollElement($target) {
    this.ionContent.scrollToPoint(0, $target.offsetTop, 500); 
    //$target (prefered if you have multiple scroll target) could be this.target.nativeElement
  }
}

Answer 6

在Ionic 4中，滚动功能被重命名为scrollToPoint()。

Screenshot from Ionic docs

Answer 7

离子含量应具有滚动到特定子元素（无论深度如何）的方法。当前的方法还可以，但是离子性目的的一个观点是使费劲，乏味的代码（如document.getElementById）过时。

这些方法也无法控制滚动动画。

因此，当前最好的选择是scrollIntoView方法。将ID附加到要滚动到的元素，然后使用getElementbyID调用scrollIntoView。所以：

.html

...
<ion-row id="myElement">

...

</ion-row>

ts

...
 scrollToMyElement() {
    document.getElementById('myElement').scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }

然后在某些DOM事件或单击按钮时调用该方法。如果您的元素是有条件的，则可能无法使用。而是使用条件 hidden （隐藏）属性，或者，如果必须使用 ngIf ，则对逻辑进行计时，以使元素首先插入。

我已经尝试了其他各种离子（4）UI组件，并且效果很好。

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

7 个答案: