頁面可滾動時顯示轉到頂部按鈕

Question

只是想知道如何在Angular 2/4中做到這一點：這可能很容易，但是我不知道。

這是我的代碼：

讓我解釋一下，當我在頁面底部時，我有一個將其滾動到頁面頂部的組件。 但是，即使頁面不需要滾動，浮動div（即紅色小箭頭）也始終保持可見。

在HTML中：

每個按鈕都動態鏈接到div。 所以div在單擊按鈕時顯示

<div *ngFor="let sampledata of SAMPLEDATA; trackBy: trackId">
     <button  (click)="transmitInfo(sampledata ,0)" > </button>
     <div *ngFor="let data of sampledata .data; trackBy: trackId" >
         <button  (click)="transmitInfo(data,1)" > </button>
     </div>
     <!-- This keeps on going -->
</div>

<div>
     <div *ngIf="renderdata === 0"> {{Object Data}}</div>
     <div *ngIf="renderdata === 1">{{Object Data}}</div>
     <div *ngIf="renderdata === 2">{{Object Data}}</div>
</div>

<div id="scroolUpRight">
   <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
</div>

假設當用戶單擊按鈕2或3時，基於單擊的按鈕顯示第二或第三格，該div是巨大的數據。 激活這些頁面后，頁面將自動變為滾動狀態。

在CSS中：

#scroolUpRight {
    position: fixed;
    bottom: 4%;
    right: 2%;
}

#scroolUpRight :hover {
    cursor: pointer;
}

在我的組件中，我將其帶到頁面頂部：

ngOnInit() {
  this.renderdata = 0;
}

transmitInfo(data, type): void {
        if (type === 1) { this.sampleData = data; this.renderdata = 1; }
        if (type === 2) { this.dataData = data; this. renderdata = 2; }
    }

scrollToTop() {
    return window.scrollTo(0, 0);
}

現在我不知道這是否可行，但是我做到了：

toogleScroolButton(): void {
        if (window.screenY > 300 ) {
            console.log('window length is 300 +');
        }
}

但這是一個功能。 我如何制作一個功能或組件來自動檢測頁面何時可滾動並顯示此div，當不可滾動時將其隱藏。

預期結果：是在人開始滾動時使該div可見。

以前的知識：

我之前使用Javascript和Jquery進行了相同的操作。 但是我該如何使用angular2,4或更高版本呢？ 我需要這樣做的原因是當用戶開始滾動時使該div動畫化。

我確實接受優化上述代碼的建議。 請讓我知道是否有..;;）

Answer 1

您可以在方法中使用簡單的*ngIf綁定：

<div *ngIf="scrollButton()">
    Top <button>up button</button>
</div>

使用scrollButton()方法很簡單：

public scrollButton():boolean {
    return window.screenY > 300;
}

僅當scrollButton()方法返回true ，才會渲染div，這使您可以輕松自定義頂部按鈕的渲染條件，因為您只需要從中返回一個boolean 。

Answer 2

這工作。 我需要讓HostListener使Windows滾動，甚至可以查看是否可以滾動頁面。

window.scrollY為我提供了滾動頁面的大小，這有助於我確定是否在滾動頁面。 如果scrollY達到一定數量，我可以說我正在向下滾動，即， I can trigger an *ngIf to true if I am scrolling bottom else I can make it false ，則I can trigger an *ngIf to true if I am scrolling bottom else I can make it false 。 下面的代碼:)

加

import { HostListener } from '@angular/core';

export class BlaBlaBla {

    //And this did the trick
    activateGoTop : boolean;

    OnNgInit :: activateGoTop = false /* added Silly Reference please put this in ngOnInit() { --- }*/

    @HostListener('window:scroll',[])
    onWindowScroll() {
         if ( window.scrollY > 100 ) {
            this.activateGoTop = true;
         } else {
            this.activateGoTop = false;
         }
     }
}

在HTML中：

//Gets activated when screenY is scrolled for more than 100px

<div id="scroolUpRight" *ngIf="activateGoTop">
      <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
 </div>

希望這對某人有幫助..;）