对于定制的滚动条，我们该如何精确地使用angular的clientHeight，scrollTop和scrollHeight？

Question

我有两个用于特定div的自定义按钮（向上滚动和向下滚动）。 div包含一些动态的按钮元素。

在这里，我试图在显示最后一个div元素按钮时禁用向下按钮，并在div元素启动时禁用向上按钮。这是我的代码

HTML代码：

<div class="no-gutter scroll-button">
        <button name="up" class="btn btn-sm btn-style" (click)="scrollUp(sectionBar)"><span
                class="glyphicon glyphicon-arrow-up"></span></button>
        <br>
        <button name="down" class="btn btn-sm btn-style" (click)="scrollDown(sectionBar)"><span
                class="glyphicon glyphicon-arrow-down"></span></button>
    </div>

JS代码：

 checkScrollHeight(){
     let scrollButton = document.getElementsByClassName("navigation-items")[0];


         if (scrollButton.clientHeight + scrollButton.scrollTop   >=  scrollButton.scrollHeight  ) {
         (<HTMLInputElement> document.getElementsByName("up")[0]).disabled = false;
         (<HTMLInputElement>document.getElementsByName("down")[0]).disabled = true   ;
     }else{

         (<HTMLInputElement> document.getElementsByName("up")[0]).disabled = true;
         (<HTMLInputElement>document.getElementsByName("down")[0]).disabled = false;
     }
 }

这对我来说效果很好，直到我调整浏览窗口的大小为止，

调整浏览器窗口的大小后，向下按钮也可以正常工作。但是单击后将禁用向上按钮。

我的if条件中是否存在逻辑错误，或者如果可能的话，是否存在更好的逻辑错误？请提出。

由于我对clientHeight，scrollTop方面有所了解，但是我不确定如何准确地为查询实现它。

谢谢。