Sim! Você precisa dar ao contêiner a regra scroll-snap-type: x mandatory
, no caso do scroll horizontal, e aos filhos dê a regras scroll-snap-align: center
.
Agora à resposta mais completa. Quanto ao contêiner você deverá passar dois parâmetros:
1) Quanto ao rigor, o snap pode ser 'mandatory' ou 'proximity'. No primeiro caso, o snap será rigoroso e no segundo o snap funcionará apenas se o elemento estiver próximo da posição.
2) Quanto ao eixo, o snap pode ocorrer nos eixos x, y ou 'both' (ambos).
Você também poderá criar um padding aplicável apenas ao snap. Por exemplo, se você quiser que os itens se alinhem à esquerda, mas que não toquem o lado esquerdo, poderia adicionar a regra scroll-padding: 10px
.
Exemplos:
#container{
scroll-snap-type: x mandatory;
}
#container{
scroll-snap-type: both proximity;
scroll-padding: 10px;
}
Quanto aos elementos:
Você deverá dizer se deseja alinhá-los pelo início, centro ou fim com a regra scroll-snap-align
em "start", "center" ou "end".
Além disso, de forma análoga ao padding do contêiner, você pode utilizar scroll-margin
para definir margens aplicáveis apenas para o scroll.
Exemplos:
#container>.element{
scroll-snap-align: center;
}
#container>.element{
scroll-snap-align: start;
scroll-margin-left: 50px;
}
Fonte: https://developers.google.com/web/updates/2018/07/css-scroll-snap