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

Question

我在 Ionic2 中寻找类似于 scrollIntoView() 的东西，例如，当我点击一个按钮时使用。

None 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 link。

只需提供元素和 id="scrollXYZ" 并将按钮包裹在

中

示例：

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

Answer 3

我注意到上述解决方案不能很好地与 Angular 通用服务器端渲染 (SSR) 配合使用，因为 document 在服务器端不可用。

因此我编写了一个方便的插件来实现滚动到 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 中，滚动功能重命名为 scrollToPoint()。

Answer 6

ion-content 应该有滚动到特定子元素的方法，无论有多深。目前的方法还可以，但 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 7

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

Content 更改为 IonContent
scrollTo 更改为 scrollToPoint
ionic-angular改为@ionic/angular
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 8

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

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

How to scroll element into view when it's clicked

typescript

ionic-framework

ionic2

ionic3

angular