Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rikaschmitt

Ajustar a altura do scroll quando validar campo

Por , em Desenvolvimento frontend

Recommended Posts

rikaschmitt    54

rikaschmitt
Postado

Boa tarde.

 

Estou utilizando a validação HTML5 no meu formulário. Quando algum campo está inválido, aparece aquele balãozinho e o scroll vai até o campo. O problema é que tenho um header fixo e ele posiciona a barra de rolagem bem em cima desse header, deixando o campo escondido.

 

Existe alguma forma de alterar esse scroll?

 

 

Até encontrei na internet uma possível solução para isso:

var elements = document.querySelectorAll('input,select,textarea');


for (var i = elements.length; i--;) {
    elements[i].addEventListener('invalid', function () {
        this.scrollIntoView(false);
    });
}
Que adiciona um "false" para o scrollIntoView de todos os inputs, selects e textareas do site... porém, não funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Opa Rikas!

Como você quer alterar esse scroll? Você quer que ele continue descendo até o input inválido, mas sem ficar por cima dele, ou parar de fazer com que o scroll ocorra?

Se for pra parar, o código acima funciona (vide obs.). Se for pra ficar acima do input, talvez adicionar algumas propriedades de margin e padding possam resolver (estou quase acreditando que não, mas ok, vale a tentativa) a situação.

Obs.: Na verdade, o código que citou funciona. Ele só nega que a página dê um scroll até o input inválido e isso funciona muito bem. Altere o valor false para true e veja o que ocorre.

EDITADO

Estou tentando criar uma opção pra invalidar o scroll padrão e substituí-lo por um scrollTop. Vou ver o que consigo e já retorno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Eu testei esse código em um código á parte e realmente funcionou, porém no meu site não. Acredito que seja porque no teste estava com um margin-top no <body> para suprir o header fixo. Meu site não mexi no <body>, supri esse espaço do header mexendo no <main> do conteúdo.

 

O que seria ideal é dar o scroll até o campo inválido só que adicionando a altura do header para que não fique em cima do campo.

 

Edit: alterei e botei uma margin no body, mesmo assim não funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito