平滑滚动角度2

我有麻烦得到一个平滑的滚动服务工作在角度2.有没有任何服务平滑滚动,或平滑的锚定滚动,可能会有效,直到角度2团队得到$anchorScroll angular2等效工作？

到目前为止,我刚刚尝试过：

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

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

在id通过的按钮上调用滚动条

<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,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的效果,其中滚动是一个snappy,而不是一个平滑的过渡,但滚动不顺利,我收到以下异常错误.

UPDATE

发现angle2正在做一个不同的setTimeout,我不再收到这个错误,但滚动仍然是瞬时的,而不是平滑的滚动.

我变了

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

至

setTimeout(()=> this.win.scrollTo(0,定时器*速度);

好的,在我的头一点点,这里是一个似乎工作正常的解决方案.

与以前一样,当我点击时,我声明了条件id和一个带有ScrollTo函数调用的按钮.

现在,解决方案中只有两个文件是一个有助于返回文档窗口和模板组件的服务.在上述状态下,窗口服务没有变化,但为了一个好的答案,我将再次包含它.

window.service.ts：大声喊到https://gist.github.com/lokanx/cc022ee0b8999cd3b7f5帮助这件作品

import {Injectable,];

app.component.ts

import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import {WINDOW,WINDOW_PROVIDERS} from './window.service';

@Component({
  selector: 'my-app',templateUrl: 'app.tpl.html',providers: [WINDOW_PROVIDERS]
})

class AppComponent {
    win: Window;
    private offSet: number;
    constructor(
        private _win: WINDOW) { 
        this.win = _win.nativeWindow;
    }
    title = 'Ultra Racing';
    things = new Array(200);

    scrollTo(yPoint: number,duration: number) {
        setTimeout(() => {
            this.win.window.scrollTo(0,yPoint)
        },duration);
        return;
    }
    smoothScroll(eID) {
        var startY = currentYPosition();
        var stopY = elmYPosition(eID);
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            this.win.window.scrollTo(0,stopY); return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        var step = Math.round(distance / 100);
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for (var i = startY; i < stopY; i += step) {
                this.scrollTo(leapY,timer * speed);
                leapY += step; if (leapY > stopY) leapY = stopY; timer++;
            } return;
        }
        for (var i = startY; i > stopY; i -= step) {
            this.scrollTo(leapY,timer * speed);
            leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
        }
    }
}
function currentYPosition() {
    // Firefox,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;
}

bootstrap(AppComponent)

我创建了一个plunk来展示这个例子：
Plunk Example

平滑滚动角度2

猜你在找的Angularjs相关文章