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 - 滾動動畫

回答

相關問題