Arquivo Discussoes de Programacao e Tecnologia Bom dia pessoal, eu tô procurando (tentando) uma animação que vc faz o scroll com o mouse e ele desce exatamente pra div que a gente quer, como se fosse um anchor…
Eu achei essa:
Muito boa por sinal, mas é pago… Alguém conhece algo similar?
Tem esse exemplo no StackOverFlow tbm, mas a animação de scroll é só quando clica no botao, queria achar algo com o mouse mesmo.
Eu sei que a pergunta é em relacao ao CSS, mas voce ja tentou isso aqui atraves do JavaScript? Nao precisa de libraries para fazer isso, pois é algo muito basico e voce nao quer aumentar o size do seu bundle por um evento simples assim.
Boa Sorte
Opa, valeu pela resposta!
Mas o intuito era ficar tipo aquele negocio do tik tok, que vc arrasta pra baixo ou pra cima e troca de post, conseguiu entender mais ou menos?
ah entendi, voce quer que o proximo scroll pegue a tela toda? Isso é para desktop ne? Eu acho que da para voce quebrar cada visualizacao em um wrapper assina esse wrapper com uma id crescente que voce consegue rastrear, e cada vez que voce capturar o gesto do usuario ativando o evento da sua funcao, voce envia a id do proximo elemento. A sua funcao usa esse id para procurar o elemento no DOM Tree e ai voce usa o metodo que eu mencionei para mover a sua pagina.
Mas tem outras formas mais simples de fazer isso, da uma olhada nesse aqui por exemplo
Então, é pra mobile e desktop (web).
eu consegui achar esse exemplo e ficou bem legal!
Esse é bom mas você ainda precisa de limitar para 1 elemento por scroll, talvez voce precise de usar algo chamado throttling mas ai ja envolve JavaScript.
não pô, mas é aquilo mesmo. Como se fosse o tik tok mesmo
Tiktok aceita scrolling de 1 em 1 elemento pelo iPhone, nao sei se aceita varios elementos ao mesmo tempo em outras plataformas. Por isso fiz a recomendacao, que bom que ja encontrou a solucao entao 
As vezes o portugues foge da lingua, o que eu quis dizer eh que o TikTok pelo iPhone voce passa de um container por vez quando faz o scroll, agora vi que o Android e na Web tambem é possivel, ja a sua postagem acima CSS Scroll Snapping, vertical not working pela logica que eu vi, parece que ele simplesmente fazia o smooth scroll sem ter a limitacao de 1 container com 100vh por viewport. Mas o exemplo que voce esta demonstrando acima parece que ja esta funcionando da forma que voce quer, entao esta tranquilo!
Edit 1: Um elemento por tela faz muito mais sentido, Instagram tem o modelo que deixa o usuario parar o scroll pois é uma ideia trazida do Facebook eu diria, é sem limitacao, mas eu percebo que o fluid do tiktok eh bem mais tranquilo na hora que voce esta consumindo informacao. Eu acho que ja expliquei acima, o throttling e o seu smoothScroll com os ids seria a combinacao perfeita caso voce precise.
Eu só fiquei meio confuso em relação ao throttling, ele controlaria o que exatamente?
Quando o usuario faz o scroll, cada pixel que a tela movimenta para baixo ativa a funçao para cuidar da mudanca do ContainerA para o ContainerB, e do B ao C e por ai vai. Entao se o usuario quer movimentar 100 px de scroll no +Y axis onde a sua funcao precisa ser invocada apenas uma vez, ai a sua funcao é chamada 100 vezes.
Isso alem de ser um bug, tambem pode causar uma queda enorme de performance no seu app. Por isso voce usa o Throttle para limitar a funcao a ser invocada digamos que 1 vez a cada 1 segundo.
Aqui vai um exemplo de Throttling e Debouncing, no seu caso voce precisa do Throttle
Esse Throttle vai te ajudar na hora de voce chamar a funcao 1 vez para mudar para o proximo container, pois se voce chama a funcao 100 vezes voce pode movimentar 100 vezes mais.
Throttling e Debouncing sao meio high level performance enhancers em CS, muita gente nao sabe como funciona, mas eu quis te passar isso para te ajudar agora ou mais adiante.
