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

Como fazer o scrollSuave sem usar Jquery?

O professor comentou no video que poderiamos fazer o scrollSuave com o JavaScript puro, gostaria de saber se alguem conseguiu e se poderia compartilhar o código.

2 respostas
solução!

Como pode ver fica com bem mais linhas e temos de nos preocupar com alguns por menores. A variável step vai dizer o período de atualizacao do scroll, se colocarmos muito pequeno pode dar alguns problemas de não rodar o numero de vezes o suficiente para o scroll chegar ao destino.

function ativaScrollSuave(selector) {

    document
    .querySelector(selector)
    .addEventListener('click', function(event) {

        event.preventDefault();
        var page = document.querySelectorAll('html, body');
        var origin = Math.max(page[0].scrollTop, page[1].scrollTop);
        var dest = document.querySelector(this.attributes.href.value).offsetTop;
        var time = 500;
        var step = 5;
        var counter = 0;

        var animationId = setInterval(function() {

            counter++;
            page.forEach(function(e) {
                e.scrollTop = origin + ((dest - origin) * counter * step / time);
            });
        }, step);
        setTimeout(function() {

            clearInterval(animationId);
            e.scrollTop = dest;
        }, time);
    });
}

ativaScrollSuave('a[href*=panel-about]');
ativaScrollSuave('a[href*=panel-speakers]');
ativaScrollSuave('a[href*=panel-form]');

Muito obrigado Hiroshi, ajudou muito.

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