Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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);
});
}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.
Mas ele vai alinhar ao top, teria que ver como tá seu HTML.
[ ]'s!
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.