Uma Introdução ao CSS Scroll Snap Points

o Módulo Snap Scroll CSS é um padrão web que nos dá algum controle sobre rolando em uma página da web para que possamos fazer com que os usuários rolem para certas partes de uma página em vez de apenas em qualquer lugar.

Rolagem é uma das ações mais realizadas em um site. Os navegadores, ao longo dos anos, têm melhorou seu desempenho de rolagem para combinar a força dos dedos ágeis dos usuários. E os desenvolvedores têm usado rolando criativamente para obter uma experiência de usuário melhor ou inédita.

No entanto, quando se trata da correlação entre codificação e rolagem, Apenas JavaScript parecia ter qualquer controle sobre o último. Isso foi assim por um longo período de tempo, mas com o introdução de pontos de alinhamento de rolagem, CSS começou a recuperar.

Rolagem sem pontos de alinhamento de rolagem

Normalmente, não rolamos muito devagar, principalmente nos telefones. Quanto mais rápido você rolar, menos controle você terá sobre onde na tela você vai acabar quando você parou de rolar.

Imagine que você está percorrendo uma variedade de imagens de produtos em um site, ou uma galeria de fotos ou slides on-line. O que você preferiria em tais aplicações é ver todo o produto, foto ou slide toda vez que você rolar. Não apenas um parte da imagem, foto ou slide do produto.

Por exemplo, na demonstração abaixo você pode ver sempre que o usuário parar de rolar, somente cerca de metade da imagem é visível na parte inferior da tela. No entanto, a maioria dos usuários prefere ver a última imagem totalmente.

Rolagem com pontos de alinhamento de rolagem

É aqui que nós trazemos Pontos de alinhamento de rolagem CSS. O nome é auto-explicativo; é um padrão CSS que nos permite colocar os itens no lugar quando rolando.

tem cinco propriedades CSS que constituem este padrão:

1. scroll-snap-type
2. scroll-snap-points-x
3. scroll-snap-points-y
4. rolagem-snap-coordenar
5. rolagem-snap-destino

Suporte de Navegador

As propriedades precisar -webkit e -Senhora prefixos para os navegadores relevantes. A partir da gravação deste artigo, o snap à rolagem CSS não é suportado no Chrome e no Opera.

Observe que as quatro últimas propriedades provavelmente serão descartadas pelos agentes do usuário no futuro próximo. Em vez de, novas propriedades, nomeadamente scroll-snap-align, scroll-snap-margin, e scroll-snap-padding, pode ser criado, conforme definido nesta especificação.

No entanto, eles tem um propósito semelhante como as antigas propriedades. Atualmente, o antigo conjunto de propriedades funcionará bem.

Propriedades

Você precisa Adicione o scroll-snap-type propriedade para o contêiner de rolagem (o elemento contêiner cujos filhos estão transbordando enquanto está rolado). Especifica o rigor da ação instantânea. Pode levar três valores:

1. obrigatório - quando a rolagem estiver concluída, a rolagem encaixar em um ponto de encaixe relevante
2. proximidade - menos estrito que obrigatório; será dependem do julgamento do UA se o elemento vai se encaixar em um determinado ponto de encaixe
3. Nenhum - sem encaixe é feito

o scroll-snap-points-x e scroll-snap-points-y propriedades pertence ao contêiner de rolagem, também. Eles se referem a pontos nos eixos xey onde os pontos de snap existirão. Seu valor é dada pelo repetir() função. Por exemplo, se você quiser adicionar pontos de encaixe ao longo do eixo x no intervalo de 100 px você precisa usar o scroll-snap-points-x: repita (100px) regra.

o rolagem-snap-destino A propriedade também é adicionada ao contêiner de rolagem. isto define uma coordenada no contêiner onde fica um destino instantâneo. É nesse destino de encaixe que os filhos do contêiner se encaixarão quando rolados.

Você pode usar o rolagem-snap-coordenar propriedade em conjunto com rolagem-snap-destino. Você precisa adicioná-lo aos elementos filhos do contêiner. isto define as coordenadas dos elementos filhos, que se alinhará com as coordenadas de destino de seu contêiner de rolagem quando o usuário rolar a tela.

Observe que você não precisa usar todas as propriedades de uma só vez. Somente scroll-snap-type é compulsório. Junto com isso, você pode definir pontos de snap individuais ou usar a combinação de coordenadas de destino.

Exemplo de código

Aqui está um trecho de código de exemplo para um recipiente de rolagem típico, com rolando na direção vertical e algumas imagens dentro. Ele mostra a demonstração que você pode encontrar no começo deste post.

 div largura: 300px; altura: 300 px; estouro: auto;… div> img width: 250px; altura: 150px;… 

Agora nós adicione alguns pontos de snap para o contêiner de rolagem:

 div largura: 300px; estouro: auto; scroll-snap-points-y: repita (150px); scroll-snap-type: obrigatório;  

Abaixo, você pode ver como a saída se parece com Pontos de snap CSS adicionados. Observe sempre que a rolagem parar enquanto a imagem inferior estiver apenas parcialmente visível, imagem completa aparece depois que o scrollport se encaixa em um ponto de encaixe acima dele.