angle：要素の自動スクロール

Question

リスト内の項目をスムーズにスクロールさせる方法を見つけようとしていますが、可能であればアニメーション効果があります。

ここのような項目の私のリストがどのように見えるかです：https://plnkr.co/edit/nRhpyO71eHOaQTzOElFe?p=preview

<button (click)="prev()">Prev</button> 
<button (click)="next()">Next</button> 
<button (click)="autoplay()">Auto play</button> 
<div> 
    Current: {{current}} 
</div> 

<div class="wrapper"> 

    <mat-card *ngFor="let item of [0, 1, 2,3,4,5,6,7,8,9]" 
    class="item" id="'item'+item" 
    [ngClass]="item == current ? 'active' : ''" 
    > 
    This is item {{item}} 
    </mat-card> 

</div> 

構成 - 次の要素に移動する手動モードの両方がありますし、次の項目になる自動モードがあります

export class CardOverviewExample { 

    constructor(private elRef:ElementRef) { 

    } 

    current: number = 0; 

    autoplay() { 
    if (this.current < 9) { 
    next(); 
    } else { 
     this.current = 0; 
    } 
    setTimeout(() => this.autoplay(), 2000); 
    } 

    next() { 
    this.current = this.current + 1; 
    setTimeout(() => this.scrollCurrentIntoView); 
    } 
    prev() { 
    this.current = this.current - 1; 
    setTimeout(() => this.scrollCurrentIntoView); 
    } 
    scrollCurrentIntoView() { 

    let id = '#item' + current; 
    let el = this.elRef.nativeElement.querySelector(id); 
    console.log("el: ", el); 
    el.nativeElement.scrollIntoView({behavior: "smooth", block: "start", inline: "start"}); 
    } 
} 

数秒でアクティブになります。必要なのは、現在のアクティブな要素を常に先頭に置くことですが、ユーザーがリストから別の項目を選択したい場合は、リストをスクロールします。

scrollIntoViewを使って、スムーズな動作を試みました。それは動作しますが、それは時々派手であり、私は選択肢を探しています。 （注：scrollIntoViewは、プランナーの例では動作しませんが、私のアプリで動作します）。

スロースクロールをシミュレートするために、https://stackoverflow.com/a/45367387/1893487で提案された解決策を試しましたが、scrollTop値を2を超える異なる増分に設定しようとしました。これは動作しますが、まだ滑らかではありません。時々、中間状態を示す角度変化検出器が見えません。

CSS translateYトランスフォームを使用してスクロールすることが可能かどうかは、これがより効率的であると考えられています。スクロールを実装するための代替メカニズムの提案が評価されています。

Answer 1

あなたは少しJS

function currentYPosition() { 
// Firefox, Chrome, Opera, Safari 
if (self.pageYOffset) return self.pageYOffset; 
// Internet Explorer 6 - standards mode 
if (document.documentElement && document.documentElement.scrollTop) 
    return document.documentElement.scrollTop; 
// Internet Explorer 6, 7 and 8 
if (document.body.scrollTop) return document.body.scrollTop; 
return 0; 
}; 

function elmYPosition(eID) { 
    var elm = document.getElementById(eID); 
    var y = elm.offsetTop; 
    var node = elm; 
    while (node.offsetParent && node.offsetParent != document.body) { 
     node = node.offsetParent; 
     y += node.offsetTop; 
    } return y; 
}; 

function smoothScroll(eID) { 
    var startY = currentYPosition(); 
    var stopY = elmYPosition(eID); 
    var distance = stopY > startY ? stopY - startY : startY - stopY; 
    if (distance < 100) { 
     scrollTo(0, stopY); return; 
    } 
    var speed = Math.round(distance/75); 
    if (speed >= 20) speed = 20; 
    var step = Math.round(distance/25); 
    var leapY = stopY > startY ? startY + step : startY - step; 
    var timer = 0; 
    if (stopY > startY) { 
     for (var i=startY; i<stopY; i+=step) { 
      setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
      leapY += step; if (leapY > stopY) leapY = stopY; timer++; 
     } return; 
    } 
    for (var i=startY; i>stopY; i-=step) { 
     setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
     leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 
    } 
    return false; 
}; 

を使用して、この

scrollCurrentIntoView() { 

let id = '#item' + current; 
let el = this.elRef.nativeElement.querySelector(id); 
console.log("el: ", el); 
smoothScroll(el); 

}

のようなビューにスクロールを変更することができます