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

Posted 2023-03-13

【中文标题】单击时如何将元素滚动到视图中

【英文标题】：How to scroll element into view when it's clicked

【发布时间】：2017-01-16 17:43:59

【问题描述】：

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

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

【参考方案1】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

如果您有新问题，请点击 按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review

【参考方案2】：

对于 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
  

【讨论】：

非常感谢！我不得不使用@ViewChild(IonContent, static: false ) ionContent: IonContent;，但其他一切都很完美

Joshua Ohana 是对的，尤其是对 ionic 5

【参考方案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 组件，并且效果很好。

【讨论】：

这很好用.. 但不是特定于角度的代码，:) 使用 @ViewChild('myDiv') myDiv: ElementRef; this.myDiv.nativeElement.scrollIntoView( behavior: 'smooth', block: 'center' );

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案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);
  

【讨论】：

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

我很抱歉@Willwsharp，plunker 使用了旧版本的 Ionic。今天晚些时候我会创建一个新的 plunker :)

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

【参考方案7】：

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

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

NPMngx-scroll-to

GitHubngx-scroll-to

【讨论】：

我认为的最佳解决方案

【参考方案8】：

我会在 HTML 中使用 anker 链接。

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

中

例子：

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

【讨论】：

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

@Mackelito 如果您也动态添加 scrollTo，它会。