scroll - 平滑滚动 angular2

Question

我无法在 Angular 2 中使用平滑滚动服务。在 Angular 2 团队获得 $anchorScroll angular2 等效工作之前，是否有任何平滑滚动或普通 anchor 滚动的服务可以工作？

到目前为止我刚刚尝试过:

在父 div 上设置 *ngFor 循环递增 id

[attr.id]="'point' + i"

在传递了 id 的按钮上调用 scrollto

<button 
     type="button" 
     class="btn btn-lg btn-default " 
     (click)="smoothScroll('point'+i)">
           Scroll to point
</button>

在关联的组件中，我试图实现一个普通的 js 平滑滚动功能

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 / 100);
        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(this.win.scrollTo(0, leapY), timer * speed);
                leapY += step; if (leapY > stopY) leapY = stopY; timer++;
            } return;
        }
        for (var i = startY; i > stopY; i -= step) {
            setTimeout(this.win.scrollTo(0,leapY), timer * speed);
            leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
        }
    }
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;
}

我也在尝试为来自窗口提供程序服务的 this._win.scrollTo 提供对窗口的访问权限

import {Injectable, Provider} from 'angular2/core';
import {window} from 'angular2/src/facade/browser';
import {unimplemented} from 'angular2/src/facade/exceptions';

function _window(): Window {
  return window
}

export abstract class WINDOW {
  get nativeWindow(): Window {
    return unimplemented();
  }
}

class WindowRef_ extends WINDOW {
  constructor() {
    super();
  }
  get nativeWindow(): Window {
    return _window();
  }
}

export const WINDOW_PROVIDERS = [
  new Provider(WINDOW, { useClass: WindowRef_ }),
];

** 编辑 ----------------------**

我将 this.win.scrollTo 更改为 this.win.window.scrollTo 现在我得到了类似于 angular1.x $anchorscroll 的效果，其中滚动是快速的而不是平滑的过渡，但滚动是不顺利，我收到以下异常错误。

更新

在发现 angular2 以不同方式执行 setTimeout 后，我​​不再收到该错误，但滚动仍然是瞬时的，而不是平滑的滚动。

我变了

  setTimeout(this.win.scrollTo(0, leapY), timer * speed);

到

 setTimeout(() => this.win.scrollTo(0, leapY), timer * speed);

Answer 1

window 对象中有一个名为scrollTo() 的方法。 如果将行为设置为“平滑”，页面将处理平滑滚动。 示例(滚动到页面顶部):

 window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

还有后备示例:

    try 
    { 
     window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
     } catch (e) {
      window.scrollTo(0, 0);
      }