Köşeli 4 - Kaydırma Animasyonu

Question

Tam sayfa genişliğine/yükseklik divlarına sahip bir web sayfası oluşturuyorum. Aşağı kaydırırken iki tür yöntemim var.

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

1. HostListener üzerine tıklayın

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

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

Scroll

gelin nasıl bir kaydırma animasyon efektleri eklemek için?

Tıpkı:

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

2. Ve nasıl HostListener kullanmak sonraki div gitmek için?

Answer 1

Bu eğlenceli. Çözelti, çoğu açı 2 ile olduğu gibi, gözlenebilir.

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! 

Bir tıklama ile bu kullanımı kolaydır. Sadece bir yöne kaydırmak için çalışır, ancak bu yalnızca başlamanıza gerek kalmaz. Tarama işlemini daha akıllı hale getirebilirsiniz, böylece yukarı çıkmanız gerekiyorsa çıkartırsınız ve bunun yerine, yukarı veya aşağı gidip gelme durumuna göre doğru sonlandırma durumunu belirleyen bir işlev kullanın.