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

Question

例如，我在 Ionic2 中寻找类似于 scrollIntoView() 的内容，以便在我单击按钮时使用。

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

Answer 1

当我有固定的内容和 div 或表单上的滚动时，我可以在 div 上使用 scrollToPoint 而不是内容吗？

Answer 2

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

1. Content 更改为 IonContent
2. scrollTo 更改为 scrollToPoint
3. ionic-angular 改为 @ionic/angular
4. viewChild 必须有 { static: false } // 仅当您使用 angular >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 3

离子内容应该具有滚动到特定子元素的方法，无论多深。当前的方法还可以，但 ionic 的目的之一是让像 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 组件，并且效果很好。

Answer 4

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

Answer 5

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

为了获得<Element> 对象，我使用了document.getElementById()，但是还有很多其他选项可以用来处理它。

Answer 6

请查看this working plunker

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

我注意到上述解决方案不适用于 Angular Universal 服务器端渲染 (SSR)，因为 document 在服务器端不可用。

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

NPM
ngx-scroll-to

GitHub
ngx-scroll-to

Answer 8

我会在 HTML 中使用 anker 链接。

只需给出元素和 id="scrollXYZ" 并将按钮包装在一个

中

例子：

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