Question

我对angular 6还是陌生的，并且正在用angular 6创建应用程序。我有一个“返回顶部”按钮，用于将页面滚动到页面顶部。该按钮的CSS如下：

#scrollToTopBtn {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: cadetblue;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }

  #scrollToTopBtn:hover {
    background-color: #555;
  }

我已经为使用ngx-infinite-scroll提取的数据实现了此按钮。

<ul class="list-group" infiniteScroll
            [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="50"
            (scrolled)="onScroll()"
           (scrolledUp)="onScrollUp()"
            [scrollWindow]="true">

仅当模型变量displayScrollToTopButton设置为true时，此按钮才可见

<div  *ngIf="displayScrollToTopButton">
        <input id="scrollToTopBtn" type="button" class="btn" (click)="ScrollToTop()" value="Back to top">
      </div>

我还要将此按钮设置为仅在与ngx-infinite-scroll控件绑定的数据计数大于某个阈值时才可见。而且，在单击按钮时，我将滚动到页面顶部并使按钮不可见，如下所示：

    ScrollToTop(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.displayScrollToTopButton = false;
      }
onScroll(){
    //my business logic to fetch data from API
    this.displayScrollToTopButton = this.searchResult.length > this.itemsCountPerPage;
  }

到现在为止还可以。但是我在实现以下两个方案时遇到了问题，
1.当手动向上滚动页面（而不是使用“返回顶部”按钮）时，应隐藏“返回顶部”按钮。我试过下面的代码，但是它不起作用（函数toggleBackToTopButton正在执行，但是更新的displayScrollToTopButton变量未反映在html中）

ngOnInit() {
    window.addEventListener('scroll', this.toggleBackToTopButton, false);
  }

  toggleBackToTopButton(){
    console.log(document.body.scrollTop + " " +document.documentElement.scrollTop);
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
      this.displayScrollToTopButton = true;
    } else {
      this.displayScrollToTopButton = false;
    }
    console.log(this.displayScrollToTopButton);
  }

一旦页面完全向下滚动并且所有数据都从API获取，如果我们滚动回到页面顶部并向下滚动，则“返回顶部”按钮将不可见。预先感谢。

Angular 6窗口滚动回调函数无法更新html视图

0 个答案: