Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Prevendo para que a tela não role quando for clicado num anchor link.

Eu bolei uma solução aqui que faz com que a tela role para a posição que estava quando foi clicada, substituindo o:

btn.href= 'javascript:void(0)';

por:

var posY = window.pageYOffset;
window.setTimeout(function(){ window.scrollTo(0, posY) }, 0);

O problema é que a rolagem sobe e depois desce rapidamente, criando um efeito de "piscagem" bem ruim.

Enfim, estou compartilhando aqui até onde cheguei, mas gostaria de saber se tem uma solução mais adequada.

Abraço.

3 respostas

Fala ai Vanderson, tudo bem? Porque você gostaria de trocar o javascript:void? Pergunto isso porque acredito que o mesmo atenda muito bem a sua necessidade.

Espero ter ajudado.

Fala Matheus, beleza e você?

Então, para o projeto do curso de acessibilidade, era interessante que o link âncora não rolasse a tela. Usar o javascript:void ou o preventDefault resolvia só que também não trazia o conteúdo do link no carrossel.

Pra explicar mais fácil é melhor ver essa aula, o problema está logo no 00:00 do vídeo.

Valeu.

solução!

Fala Vanderson, nesse caso eu acho que o problema de scrollar a pagina foi uma má implementação do componente.

Se a gente seguir as recomendações da W3C sobre o componeten de carousel: https://www.w3.org/TR/wai-aria-practices-1.1/#carousel

E realizar as escolhas certas na implementação, dificilmente esse problema de slide iria ocorre, digo isso porque ja fiz um slide acessível que não rolava a tela.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software