Como fazer rolagem/scroll lento em site?

03/03/2022

0

Quando usamos o scroll do mouse para fazer rolagem em um site, ela rola e depois para instantaneamente, eu gostaria de programar o site para fazer um scroll que não parasse instantaneamente, mas que parasse aos poucos. Site exemplo: https://igorterekhov.com/en/
Matheus

Matheus

Responder

Posts

14/03/2022

Diego Marinho

Amigão, fiz um código aqui em javascript, mas acho que tem como fazer isso com css, mas não tenho certeza. Mas esse código aqui seria um esboço, desse efeito. Você mexendo um pouquinho talvez melhore. A ideia é manipular o scrollY , através do evento windows.scroll.

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

14/03/2022

Diego Marinho

Assim funcionou melhor

   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)
             })



Responder

14/03/2022

Diego Marinho

Ah ... Só que tem que colocar esse código no css :
html{
scroll-behavior: smooth;
}

Agora. sim !
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar