जब यह क्लिक किया गया है तो तत्व को स्क्रॉल करने के लिए

Question

पर क्लिक करें, उदाहरण के लिए, जब मैं बटन पर क्लिक करता हूं तो Ionic2 के भीतर scrollIntoView() के समान कुछ ढूंढ रहा हूं।

ion-content सहायता में विस्तृत विधियों में से कोई भी नहीं।

Answer 1

कृपया 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 2

मैं HTML में एक अंकर लिंक का उपयोग करें चाहते हैं।

बस एक

उदाहरण में elemnt और आईडी = "scrollXYZ" बटन देने के लिए और लपेट:

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

Answer 3

मैंने देखा ऊपर समाधान कोणीय यूनिवर्सल सर्वर साइड प्रतिपादन के साथ अच्छी तरह से काम नहीं करते (एसएसआर) document की वजह से उपलब्ध सर्वर साइड नहीं किया जा रहा।

इसलिए मैं कोणीय 4+ में तत्वों SSR

कि AoT साथ काम करते हैं और लोगों को स्क्रॉल प्राप्त करने के लिए NPM
ngx-scroll-to

GitHub
ngx-scroll-to