Kątowa 4 - Animacja przewijania

Question

Tworzę stronę internetową z pełnymi podziałami szerokości i wysokości strony. Podczas przewijania w dół mam dwa rodzaje metod.

Przewiń na Click

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

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

przewijania HostListener

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

1. Jak dodać przewijanie efekty animacji?

Podobnie jak:

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

2. I jak używać HostListener, aby przejść do następnej div?

Answer 1

Ten jest zabawny. Rozwiązanie, podobnie jak większość rzeczy kątowych 2, jest obserwowalne.

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! 

Za pomocą kliknięcia jest to łatwe w użyciu. Wystarczy przypiąć scrollTo do kliknięcia, które działa tylko w przypadku przewijania w jednym kierunku, jednak powinno to wystartować. Możesz sprawić, że skanowanie będzie bardziej inteligentne, więc odejmie, jeśli będziesz potrzebował pójść w górę, i zamiast tego użyje funkcji wewnątrz funkcji TakeWhile, która określa poprawny warunek zakończenia w zależności od tego, czy w górę, czy w dół.