Como fazer rolagem/scroll lento em site?
03/03/2022
0
Matheus
Posts
14/03/2022
Diego Marinho
Essa última parte do código -> DOMContentLoaded , controla pra que o scroll não empurre sua página assim que windows for carregado, mas provavelmente há formas melhores de fazer isso.
Mas funcionou quando fiz os testes aqui .
Dá uma olhadinha.
<script>
var pos = 0
const potenciaDelay = 3.5
window.addEventListener("scroll", async function(e){
if (scrollY < pos){
//SUBINDO
await scrollDelay(-10)
}else{
//DESCENDO
await scrollDelay(10)
}
pos = this.scrollY
})
function scrollDelay(distancia){
count = 0 ;
let delay = setInterval(async()=>{
count++
count < potenciaDelay ? scrollTo(scrollY, scrollY + (distancia)) : clearInterval(delay) ;
distancia = 0
},100)
}
document.addEventListener("DOMContentLoaded", function() {
scrollTo(0,0)
})
</script>
14/03/2022
Diego Marinho
var pos = 0 const potenciaDelay = 3 window.addEventListener("scroll", async function(e){ if (scrollY < pos){ //SUBINDO await scrollDelay(-10) }else{ //DESCENDO await scrollDelay(10) } pos = this.scrollY }) function scrollDelay(distancia){ count = 0 ; let delay = setInterval(async()=>{ count++ count < potenciaDelay ? scrollTo(scrollY, (scrollY + (distancia))) : clearInterval(delay) ; distancia = 0 },100) } document.addEventListener("DOMContentLoaded", function() { scrollTo(0,0) })
14/03/2022
Diego Marinho
html{
scroll-behavior: smooth;
}
Agora. sim !
Clique aqui para fazer login e interagir na Comunidade :)