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.
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.
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.