1
  • Erro no: Microsoft Edge

  • Tecnologia utilizada: Angular(4+)

  • Quando acontece: Somente quando o tamanho ta tela está pequeno, e não é possível exibir todos os itens da listagem da tabela
  • Tabela Utilizada: Angular Material

Seguinte, estou fazendo um projeto com Angular(4+), em que estou usando uma tabela do Angular Material.

A nossa barra de Scroll é ativada quando a tela está pequena, e quando o usuário clica em próximos itens, o edge renderiza os próximos itens, com a barra de scroll setada para baixo

A primeira vista, o edge exibe a tabela normalmente com a barra de scroll e os itens. Quando o usuário clica para ver os próximos resultados, já que exibimos 10 de cada vez, o edge renderiza com a scroll setada pra baixo, forçando assim o usuário a ter que subir o scroll da tela novamente.

inserir a descrição da imagem aqui

O Scroll é criado através da seguinte classe css:

  .table-container {
    flex: 1;
    overflow: auto;   
    display: flex;
    flex-direction: column;
  }

Código que eu utilizei para resolver:

  /** 
   * This function fix report scroll position after change page listener 
   */ 
  materialScrollDownToUp() { 
    document.getElementById('material-scroll-detect').scrollTop = 0; 
  } 

Depois você só faz usar essa chamada onde precisa, e não fica em um loop, abraços.

4
  • É só Edge que acontece isso?
    – Sam
    Commented 24/06/2018 às 18:24
  • @dvd sim, é só no microsoft edge que acontece isso Commented 24/06/2018 às 18:36
  • @dvd beleza, vou tentar aqui Commented 24/06/2018 às 18:56
  • @dvd deu certo brother, o lance era o local onde setar o ID saca ? eu estava setando na div pai, porém o local correto era pra ser colocado lá <mat-table> </mat-table>, que onda, mas valeu parceiro pela clareada ai Commented 24/06/2018 às 20:20

1 Resposta 1

2

Mova o scroll do elemento para o topo usando scrollTop = 0 com um pequeno delay no setTimeout:

setTimeout(function(){
    document.querySelector(seletor).scrollTop = 0;
}, 50);

Onde tem seletor você coloca uma id, classe, tag ou que for preciso para selecionar o elemento em que você deseja aplicar o scroll.

2
  • Essa forma tbem dá certo, só que eu fiz da seguinte maneira @dvd. Coloquei o scrollTop em uma função, nesse caso eu não entro em um loop e fica tranquilo, saca: /** * This function fix report scroll position after change page listener */ materialScrollDownToUp() { document.getElementById('material-scroll-detect').scrollTop = 0; } Commented 25/06/2018 às 13:57
  • Saquei. fica legal tb
    – Sam
    Commented 25/06/2018 às 13:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .