Como fazer rolagem/scroll lento em site?

HTML

CSS

JavaScript

HTML5

CSS3

03/03/2022

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

Curtidas 1

Respostas

Diego Marinho

Diego Marinho

03/03/2022

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>
GOSTEI 0
Diego Marinho

Diego Marinho

03/03/2022

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)
             })
GOSTEI 0
Diego Marinho

Diego Marinho

03/03/2022

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

Agora. sim !
GOSTEI 0
POSTAR