角度：元素自動滾動

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與behaviour：smooth一起使用。 雖然可以，但有時會顯得浮華，我正在尋找替代方案。 （注意：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);

}