HTML Scroll Suave e com Delay

Felipe Vido · 11 de agosto de 2022

Eu treinando desenvolvimento Web e gostaria de saber qual método e\ou linguagem preciso utilizar para conseguir reproduzir o comportamento do Scroll deste site: https://www.conceptzilla.com

Repare que o Scroll do site referência acima é suave e possuí um leve delay de movimento em relação a barra de rolagem. Já utilizei a propriedade scroll-behavior, porém, como era de se esperar, ela aplica suavidade somente no Scroll para Links internos.

Marcelo Calazans · 16 de agosto de 2022

Em 11/08/2022 às 16:51, Felipe Vido disse:

Eu treinando desenvolvimento Web e gostaria de saber qual método e\ou linguagem preciso utilizar para conseguir reproduzir o comportamento do Scroll deste site: https://www.conceptzilla.com

Repare que o Scroll do site referência acima é suave e possuí um leve delay de movimento em relação a barra de rolagem. Já utilizei a propriedade scroll-behavior, porém, como era de se esperar, ela aplica suavidade somente no Scroll para Links internos.

Olá, colega.

Esse site que você citou, utiliza o luxy.js ( luxy.js )

No passado eu usei bastante esse efeito, mas utilizando outras ferramentas.

Eu utilizava muito o nicescroll

Adoro mesmo esse efeito, e utilizo as vezes em alguns sites de clientes, quando solicitado, mas no meu site mesmo eu não uso.

Esses efeitos são muito invasivos. Para ter uma ideia, um dos requisitos para usar o luxy.js, é não colocar nada position:fixed na parte em que a rolagem será smooth.

Para fazer esse efeito ele usa um transform:translate3d em um elemento logo abaixo da tag <body>, e só de pensar o que ocorre internamente na página toda, quando você adiciona isso ao site, eu já desisto de usar.

Mas teste para ver, é bem bacana. Quem sabe você gosta.

Abraços colega.