How to scroll element into view when it's clicked

问题

Am looking for something similar to scrollIntoView() within Ionic2 to use when I click on a button, for example.

None of the methods detailed in ion-content help.

回答1:

Please take a look at this working plunker

You can use the scrollTo(x,y,duration) method (docs). The code is pretty simple, first we obtain the position of the target element (a <p></p> in this case) and then we use that in the scrollTo(...) method. First the view:

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

And the component code:

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);
  }
}

回答2:

I'd use an anker link in HTML.

Just give the elemnt and id="scrollXYZ" and wrap the button in an

Example:

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

回答3:

I noticed the above solution don't work well with Angular Universal server-side rendering (SSR) due to document not being available server-side.

Hence I wrote a convenient plugin to achieve scrolling to elements in Angular 4+ that work with AoT and SSR

NPM
ngx-scroll-to

GitHub
ngx-scroll-to

回答4:

I was trying to do this in Ionic 3 and due to the fact that <Element>.offsetTop was returning10 (the padding on the top of the element) instead of the distance to the top of the page (much larger unknown number) I ending up just using <Element>.scrollIntoView(), which worked well for me.

To get the <Element> object I used document.getElementById(), but there are many other options on how to get a handle on that.

回答5:

In Ionic 4 the scroll function is renamed to scrollToPoint().

回答6:

The ion-content should have methods for scrolling to particular child elements, however deep. The current methods are okay, but one perspective of the purpose of ionic is to make laborious, boring code like document.getElementById obsolete.

The methods also lack control over the scroll animation.

Hence currently the best option is the scrollIntoView method. Attach an id to the element you wish to scroll to, then use getElementbyID to call scrollIntoView. So:

.html

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

...

</ion-row>

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

Then call the method on some DOM event or button click. If your element is conditional this will likely not work. Instead use a conditional hidden attribute or, if you must use ngIf, time the logic as such that the element is inserted first.

I've tried this with various other ionic (4) UI components and it works fine.

来源：https://stackoverflow.com/questions/39396908/how-to-scroll-element-into-view-when-its-clicked

标签

angular

typescript

ionic-framework

ionic2

ionic3