javascript - 当页面变得可滚动时显示转到顶部按钮

Question

只是想知道我如何在 Angular 2/4 中做到这一点:这可能很简单，但我就是想不通。

这是我的代码:

让我解释一下，当我在底部时，我有一个组件可以将我滚动到页面顶部。但是即使页面不需要滚动， float 的 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 时，根据点击的按钮显示第 2 或第 3 个 div，这个 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 可见。

Previous Knowledge:

I used Javascript and Jquery before to do the same. But how do I use angular2,4 or higher for this? Reason I need this is to animate this div when person starts to scroll.

我确实接受优化上述代码的建议。如果有的话请告诉我..;)

Answer 1

这成功了。我需要让 HostListener 来滚动窗口，甚至查看我是否可以滚动页面。

window.scrollY 为我提供滚动页面大小，这有助于我确定是否正在滚动我的页面。如果 scrollY 达到特定计数，我可以说我正在向下滚动，即 如果我滚动到底部，我可以触发 *ngIf 为 true，否则我可以将其设置为 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>

希望这对某人有帮助.. ;)