Agradecemos por acompanhar o Google I/O. Assista ao conteúdo sob demanda.

Esta página foi traduzida pela API Cloud Translation.

Eventos de ajuste de rolagem

Adam Argyle

No Chrome 129, você pode usar os eventos scrollSnapChange e scrollSnapChanging do JavaScript. Ao implementar eventos de ajuste integrados, o estado de ajuste anteriormente invisível vai se tornar acionável, no momento certo, e sempre correto. Sem esses eventos, você não teria essa conveniência.

Compatibilidade com navegadores

Origem

Compatibilidade com navegadores

Origem

Antes do scrollSnapChange, era possível usar um observador de interseção para encontrar qual elemento estava cruzando a porta de rolagem, mas a determinação do que estava fixado era restrita a algumas circunstâncias. Por exemplo, você pode detectar se os itens de ajuste preenchem a porta de rolagem ou a maior parte dessa porta. Para fazer isso, observe os elementos que se cruzam na área de rolagem e, com base no item que consome a maior parte da área de rolagem, suponha que esse é o destino de ajuste. Em seguida, aguarde scrollend e aja de acordo com o item fixado (o destino de ajuste).

No entanto, antes do scrollSnapChanging, era impossível saber quando o destino de ajuste estava mudando ou para onde ele estava sendo mudado (como em um movimento de rolagem).

Um botão de rolagem horizontal é mostrado com caixas numeradas dentro como destinos de ajuste. À esquerda, há um registro em tempo real dos eventos scrollSnapChange, destacando o snapTargetInline em azul. À direita, há um registro em tempo real dos eventos scrollSnapChanging, destacando o snapTargetInline em cinza.

Teste
https://codepen.io/web-dot-dev/pen/jOjaaEP

Ótima notícia: esses novos eventos disponibilizam essas informações de forma rápida e fácil. Isso permite que as interações de ajuste de rolagem ultrapassem a capacidade atual e possibilita a orquestração de relações de ajuste de rolagem e novos cenários de feedback da interface.

scrollSnapChange

Esse evento é acionado somente se um gesto de rolagem resultou em uma nova âncora de ajuste e na seguinte ordem:

Depois que o pergaminho estiver descansado.
Antes de scrollend.

Esse evento é disparado antes da scrollend, quando a rolagem é concluída, e somente se um novo destino de ajuste estiver ativo. Isso faz com que o evento pareça lento ou justo na hora certa quando o gesto de rolagem é concluído.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

O evento expõe o item fixado no objeto do evento como snapTargetBlock e snapTargetInline. Se o controle deslizante for apenas horizontal, a propriedade snapTargetBlock será null. O valor da propriedade será o nó do elemento.

Detalhes exclusivos para scrollSnapChange

Não é disparado até que o usuário solte o gesto

Um dedo ainda na tela ou dedos em um trackpad indicam que o gesto do usuário não terminou a rolagem, o que significa que a rolagem não terminou, o que significa que o alvo de ajuste ainda não mudou. Ele está aguardando um gesto completo do usuário.

Não é acionado se o destino de ajuste não mudar

O evento é para a mudança de ajuste, e se o alvo de ajuste não mudar, o evento não será acionado, mesmo que o usuário tenha interagido com o controle deslizante. No entanto, como o usuário rolou a tela, o evento scrollend ainda é disparado após a conclusão da rolagem.

scrollSnapChanging

Esse evento é disparado assim que o navegador decide que o gesto de rolagem resultará em um novo destino de ajuste. Ele é acionado com rapidez e durante a rolagem.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

O evento expõe o item fixado no objeto do evento como snapTargetBlock e snapTargetInline. Se a barra de rolagem for apenas vertical, a propriedade snapTargetInline será null. O valor da propriedade será o nó do elemento.

Detalhes exclusivos para roleSnapChanged

Dispara cedo e com frequência durante um gesto de rolagem

Ao contrário de scrollSnapChange, que aguarda um gesto de rolagem completo do usuário, esse evento é acionado ansiosamente enquanto o usuário rola com o dedo ou usando um trackpad. Considere um usuário que está rolando lentamente sem levantar um dedo. scrollSnapChanging será acionado várias vezes durante o gesto, desde que o usuário esteja movendo a tela sobre várias possíveis posições de encaixe. Sempre que o usuário rola a tela, se o navegador determinou que, ao ser liberado, ele vai descansar em um novo destino de ajuste, o evento é acionado para informar qual elemento é esse.

Não dispara todos os alvos de ajuste ao longo do caminho para um novo alvo de ajuste

Além disso, considere um movimento brusco, em que um usuário faz um gesto de rolagem que abrange várias áreas de ajuste de uma só vez. Esse evento será acionado uma vez com a área de destino que será usada. Portanto, ele é ansioso, mas não desperdiça recursos, fornecendo o alvo de ajuste o mais rápido possível.

Casos de uso e exemplos

Esses eventos possibilitam muitos novos casos de uso e facilitam a implementação dos padrões atuais. Um exemplo importante é ativar a animação acionada pelo Snap. Revelar contextualmente o item de fixação, os filhos do item de fixação ou as informações associadas quando ele é o destino de fixação.

Os padrões a seguir demonstram alguns casos de uso para ajudar você a ser produtivo imediatamente.

Destacar um depoimento

Este exemplo promove ou foca visualmente o depoimento fixado.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

Mostrar a legenda do item fixado

Este exemplo mostra a legenda do item fixado. Ambos os eventos estão incluídos nesta demonstração para que você possa conferir as diferenças de tempo e experiência do usuário entre scrollSnapChange e scrollSnapChanging.

Alteração do Snap
https://codepen.io/web-dot-dev/pen/wvLPPBL

Ajustar mudança
https://codepen.io/web-dot-dev/pen/QWXOObw

Animar uma vez, os filhos de um slide de apresentação fixado

Esse exemplo sabe quando um novo slide foi aberto e pausado, o que é um ótimo momento para animar o conteúdo uma vez.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

Ajuste em x e y em um controle de rolagem

O ajuste de rolagem funciona para controles de rolagem que permitem rolagem horizontal e vertical. Esta demonstração mostra os destinos scrollSnapChanging e scrollSnapChange conforme você rola a grade. Esta demonstração mostra como o elemento ao qual o navegador é vinculado nem sempre é o que você pensa que é.

Uma grade de quadrados em um scroller horizontal e vertical é mostrada. A borda tracejada representa o destino de scrollSnapChanging, e a borda sólida é o destino de scrollSnapChange. Vermelho representa snapTargetInline, e azul representa snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

Dois controles de rolagem vinculados

Esta demonstração tem dois contêineres de ajuste de rolagem, em que um é uma lista de links de alto nível e o outro é o conteúdo paginado real. O novo evento scrollSnapChanging facilita a vinculação dos estados de ajuste bidirecionalmente para que eles estejam sempre sincronizados.

https://codepen.io/web-dot-dev/pen/YzoEEXj

Seletor de cores OKLCH

Esta demonstração tem três controles de rolagem, cada um representando um canal de cor diferente em OKLCH (link em inglês). O item fixado é sincronizado com o grupo de rádio relevante, e os dados podem ser recuperados de um formulário que envolve as entradas. Para um usuário de mouse ou toque, você pode rolar até o valor desejado. Para usuários de teclado, você pode usar a tecla Tab e as teclas de seta. Para um leitor de tela, isso é apenas um formulário.

O scrollSnapChanging é usado para sincronizar ansiosamente o item fixado com o estado, enquanto o scrollSnapChange é usado para animar o cabeçalho do canal de cor afetado em que a entrada do usuário foi aplicada.

https://codepen.io/web-dot-dev/pen/OJeOOVG

Captura de hubs animados impressionantes

Esta demonstração aprimora progressivamente a experiência de ajuste de rolagem com transições acionadas por ajuste usando scrollsnapchange.

Verifique o suporte a eventos com o seguinte JavaScript:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

https://codepen.io/web-dot-dev/pen/MWMOOae

Entrada de régua rolável

Esta demonstração apresenta uma régua rolável como uma maneira alternativa de escolher um comprimento para uma entrada numérica. Insira valores diretamente na entrada numérica ou role a tela até o tamanho. O evento de mudança é usado para limpar a seleção durante o gesto do usuário, enquanto o evento de mudança é usado para atualizar o estado e reforçar a escolha do usuário.

https://codepen.io/web-dot-dev/pen/LYKOOpd

Fluxo de capas

Esta demonstração é baseada na excelente recriação de animação orientada por rolagem de Bramus Van Damme do famoso fluxo de capas do macOS (também tutorial em vídeo). O scrollSnapChanging é usado para ocultar o título do álbum, e o scrollSnapChange é usado para apresentar o título. Os eventos ajudam a orquestrar um ocultamento imediato do título antigo e uma apresentação lenta do novo.

https://codepen.io/web-dot-dev/pen/Bagmmog

Mais ideias para inspirar a criatividade

Agora que é fácil saber qual elemento está prestes a ser encaixado e qual está encaixado ativamente, há muitas novas possibilidades. Confira uma lista de ideias para inspirar a criatividade e outros casos de uso:

Acionar o carregamento lento, conhecido como renderização acionada por mudança rápida ou busca de dados.
Miniaturas de tira de filme vinculadas a uma imagem maior.
Alternar a reprodução/pausa de um trailer de vídeo para uma miniatura de vídeo fixada.
Acompanhamento do Google Analytics
Scrollytelling
Interface/UX da Roda da fortuna
O alvo do ajuste recebe uma dica ancorada.
Toque para ajustar
Ajustar à tela
Sons no Snap
Deslizar interface
Guias ou carrosséis deslizáveis

Outros estudos

A equipe do Chrome está ansiosa para saber o que você vai criar com essas novas APIs e espera que elas ajudem a simplificar suas experiências de rolagem.