Angular 4 - 滚动动画

我正在创建一个具有完整页面宽度/高度div的网页。向下滚动时，我有两种类型的方法。Angular 4 - 滚动动画

上点击

//HTML 
<a (click)="goToDiv('about')"></a> 

//JS 
    goToDiv(id) { 
     let element = document.querySelector("#"+id); 
     element.scrollIntoView(element); 
     }

滚动卷轴上HostListener

@HostListener("window:scroll", ['$event']) 
    onWindowScroll($event: any): void { 
    this.topOffSet = window.pageYOffset; 
    //window.scrollTo(0, this.topOffSet+662); 
    }

1.如何添加一个滚动的动画效果？

就像：

$('.scroll').on('click', function(e) { 
    $('html, body').animate({ 
     scrollTop: $(window).height() 
    }, 1200); 
});

2.以及如何使用HostListener滚动至下一格？

来源

2017-07-19 Sumit Ridhal

我认为这是在这里的解决方案 [https://stackoverflow.com/questions/38748572/scroll-event-on-hostlistener](https://stackoverflow.com/questions/38748572/scroll-event-on-hostlistener ） –

@ObaidulHaque'HostListener'工作正常。不知道如何添加动画。 –

在您在Host Listener中调用的函数中使用CSS动画。好的指导在这里：https://css-tricks.com/aos-css-driven-scroll-animation-library/ –

这个很有趣。与大多数角度2一样，解决方案是可观察的。

getTargetElementRef(currentYPos: int): ElementRef { 
     // you need to figure out how this works 
     // I can't comment much on it without knowing more about the page 
     // but you inject the host ElementRef in the component/directive constructor and use normal vanillaJS functions to find other elements 
    } 
    //capture the scroll event and pass to a function that triggers your own event for clarity and so you can manually trigger 
    scrollToSource: Subject<int> = new Subject<int>(); 
    @HostListener("window:scroll", ['$event']) 
    onWindowScroll($event: any): void { 
    var target = getTargetElementRef(window.pageYOffset); 
    this.scrollTo(target); 
    } 

    scrollTo(target: ElementRef): void { 
    // this assumes you're passing in an ElementRef, it may or may not be appropriate, you can pass them to functions in templates with template variable syntax such as: <div #targetDiv>Scroll Target</div> <button (click)="scrollTo(targetDiv)">Click To Scroll</button> 
    this.scrollToSource.next(target.nativeElement.offsetTop); 
    } 

    //switch map takes the last value emitted by an observable sequence, in this case, the user's latest scroll position, and transforms it into a new observable stream 
    this.scrollToSource.switchMap(targetYPos => { 
     return Observable.interval(100) //interval just creates an observable stream corresponding to time, this emits every 1/10th of a second. This can be fixed or make it dynamic depending on the distance to scroll 
      .scan((acc, curr) => acc + 5, window.pageYOffset) // scan takes all values from an emitted observable stream and accumulates them, here you're taking the current position, adding a scroll step (fixed at 5, though this could also be dynamic), and then so on, its like a for loop with +=, but you emit every value to the next operator which scrolls, the second argument is the start position 
      .do(position => window.scrollTo(0, position)) /// here is where you scroll with the results from scan 
      .takeWhile(val => val < targetYPos); // stop when you get to the target 
    }).subscribe(); //don't forget!

点击这个很容易使用。您只需将scrollTo绑定到点击

这只适用于在一个方向上滚动，但是这应该让您开始。您可以使扫描变得更智能，因此如果需要增加，它会减少，而是使用takeWhile中的函数，根据是否上升或下降来计算出正确的终止条件。

来源

2017-07-29 17:06:50 bryan60

你的代码对我很好，谢谢。只是想添加，对于角4>你需要使用导入''rxjs/add/operator/switchMap';'否则你会面对“..switchMap不是一个函数”问题。 – KeaganFouche

Angular 4 - 滚动动画

回答

相关问题