ScrollTo Ionic 2のListiVewの特定のアイテム

Question

ionicのlistviewの特定の項目にスクロールしたい。配列にバインドされたリストビューがある。

<ion-list [virtualScroll]="items" approxItemHeight="120px" approxItemWidth="100%" 
    class="items-listview list list-md"> 
    <button class="items-listview-item item item-md" *virtualItem="let item"> 
    <div class="items-listview-text"> 
     {{ item.text }}<span>{{item.index}}</span> 
    </div> 
    </button> 
</ion-list> 

私はscrollToだけすなわち位置トップと左ではなく、要素自体をサポートすることを参照してください。ここでは

export class TestPage { 
    @ViewChild(Content) content: Content; 
    public items: Array<Object> = []; 

    ionViewWillEnter() { 
     console.log(this.navParams.data); 
     this.customService.getArray(this.params.index).then((items) => { 
      this.items = items; 
       //scroll to item 
       // this.content.scrollTo() 
     }); 
    } 
} 

は図です。どのようにスクロールすることができますリストビューの項目 （e。品番150）自体？ アイテム150 0 0の位置を取得してscrollToに渡すにはどうすればよいですか？

Answer 1

。まず、あなたがGIする必要があります（完全な実装hereをご確認ください） iは（iは動的バッファ比を変えたように）余りにスクロール後のリストビューのサイズ変更のタイムアウトを持つ関数（以下）ScrollToを作成した後ListView

@ViewChild(VirtualScroll) listView: VirtualScroll; 

を選択し、各リストビュー項目に一意のIDをVEのと。

private scrollTo(index: number) { 
    let key = '#customIds_' + index; 

    let hElement: HTMLElement = this.content._elementRef.nativeElement; 
    let element = hElement.querySelector(key); 
    element.scrollIntoView(); 

    //wait till scroll animation completes 
    setTimeout(() => { 
     //resize it! otherwise will not update the bufferRatio 
     this.listView.resize(); 
    },500); 
} 

最後のIは、リストビューのロードまで待っていたように私はちょうど秒の遅延の後にこの関数を呼び出した：

//must be delay otherwise content scroll doesn't go to element properly..magic! 
setTimeout(() => { 
    this.scrollTo('someId'); 
}, 1000); 

Answer 2

あなたは[id]="'item' + item.index"ような何かを行うことによって（各項目にIDを割り当て、コード内でだけoffsetTopを取得するためにそのIDを使用することができます。

scrollTo(elementId:string) { 
    let yOffset = document.getElementById(elementId).offsetTop; 
    this.content.scrollTo(0, yOffset, 4000) 
} 

Answer 3

現在の受け入れ答えが唯一の親要素に対する相対スクロールので、ここで私は（DOMを横断せずに）選択された要素にスクロールする思い付いたものです。私は私が思い付くソリューションを掲示しています

scrollTo(element:string) { 
    let elem = document.getElementById(element); 
    var box = elem.getBoundingClientRect(); 

    var body = document.body; 
    var docEl = document.documentElement; 

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; 
    var clientTop = docEl.clientTop || body.clientTop || 0; 
    var top = box.top + scrollTop - clientTop; 
    var cDim = this.content.getContentDimensions(); 

    var scrollOffset = Math.round(top) + cDim.scrollTop - cDim.contentTop; 

    this.content.scrollTo(0, scrollOffset, 500); 
    }