Como exatamente podemos usar clientHeight, scrollTop & scrollHeight em angular de uma barra de rolagem personalizada?

votos
0

Eu tenho dois botões personalizados (rolar para cima e rolar para baixo) para uma div particular. O div contém um conjunto de elementos de botão que é dinâmico.

Aqui eu estou tentando desativar o botão para baixo quando o último botão elemento div é mostrado e irá desativar o botão para cima quando os elementos div será iniciado. Aqui está o meu código

Código 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>

Código 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;
     }
 }

Isso funciona bem para o meu até que eu redimensionar minha janela de navegação,

Depois de redimensionar a janela do navegador também para baixo botão funciona bem. Mas se o botão será desativado após o único clique.

Existe algum erro lógico na minha condição if ou melhor se a condição for possível para isso? Gentilmente sugerir.

Como eu sou um pouco ciente de clientHeight, scrollTopaspectos, mas eu certamente não sei como implementá-lo exatamente para minha consulta.

Obrigado.

Publicado 20/09/2018 em 04:10
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more