Eventos de ajuste de rolagem

No Chrome 129, é possível usar os eventos scrollSnapChange e scrollSnapChanging do JavaScript. Ao implementar eventos de ajuste integrados, o estado de ajuste anteriormente invisível se tornará útil, no momento certo e sempre correto. Essa não é uma conveniência que você tinha sem esses eventos.

Antes de scrollSnapChange, era possível usar um observador de intersecção para descobrir qual elemento estava cruzando a porta de rolagem, mas a determinação do que foi capturado ficava 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, você observa elementos cruzados da área de rolagem e, com base em qual item está consumindo a maior parte da área de rolagem, presuma que esse seja o alvo de ajuste, aguarde o scrollend e aja sobre o item ajustado (o alvo de ajuste).

Antes de scrollSnapChanging, no entanto, era impossível saber quando o alvo de ajuste estava mudando ou para que ele estava sendo alterado (como se houvesse uma rolagem de rolagem).

Ótimas notícias: esses novos eventos tornam essas informações disponíveis de forma rápida e fácil. Isso libera interações de ajuste de rolagem para ir além da capacidade atual e permite a orquestração de relações de ajuste de rolagem e novos cenários de feedback da interface.

scrollSnapChange

Este evento é disparado somente se um gesto de rolagem resultou na posição de um novo destino de ajuste e na seguinte ordem

1. Depois que o pergaminho estiver descansado.
2. 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 no momento certo 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 ajustado no objeto de evento como snapTargetBlock e snapTargetInline. Se o botão de rolagem for apenas horizontal, a propriedade snapTargetBlock será null. O valor da propriedade será o nó do elemento.

Detalhes exclusivos para o 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 de rolar, o que significa que a rolagem não terminou, ou seja, o alvo de ajuste ainda não foi modificado, depende de um gesto completo do usuário.

Não é disparado se o alvo de ajuste não foi alterado

O evento é para mudança de ajuste e, se o alvo do ajuste não foi alterado, ele não é disparado, mesmo com a interação de um usuário com o botão de rolagem. No entanto, como o usuário rolou a tela, o evento scrollend ainda é disparado após a conclusão da rolagem.

scrollSnapChanging

Este evento é disparado assim que o navegador decidir que o gesto de rolagem tem ou resultará em um novo destino de ajuste. Ele é acionado rapidamente 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 ajustado no objeto de evento como snapTargetBlock e snapTargetInline. Se o controle de rolagem for apenas vertical, a propriedade snapTargetInline será null. O valor da propriedade será o nó do elemento.

Detalhes exclusivos de roleSnapChanged

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

Ao contrário do scrollSnapChange, que aguarda um gesto de rolagem completo do usuário, esse evento é disparado prontamente enquanto o usuário rola com o dedo ou usa um trackpad. Considere um usuário que está rolando lentamente sem levantar o dedo. O scrollSnapChanging vai disparar várias vezes durante o gesto, desde que o usuário esteja movendo vários possíveis alvos de ajuste. Sempre que o usuário rola a tela, se o navegador determina que, após o lançamento, ele se baseia em um novo alvo de ajuste, o evento é disparado para informar a você qual é o elemento.

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

Além disso, considere uma rolagem rápida, em que um usuário faz um gesto de rolagem que abrange vários alvos de ajuste de uma só vez. esse evento será disparado uma vez com o alvo que será sobreposto. Assim, ele fica ansioso, mas não é um desperdício, e fornece o alvo de ajuste o mais rápido possível.

Casos de uso e exemplos

Esses eventos permitem muitos novos casos de uso e, ao mesmo tempo, tornam os padrões atuais muito mais fáceis de implementar. Um ótimo exemplo é a ativação da animação acionada pelo ajuste. Revelar contextualmente o item do ajuste, os filhos dele ou as informações associadas quando ele for o destino do ajuste.

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

Destacar um depoimento

Este exemplo promove ou concentra visualmente o depoimento capturado.

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

Mostrar a legenda do item capturado

Este exemplo mostra a legenda do item alinhado. 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.

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

Este exemplo sabe quando um novo slide foi posicionado e apoiado, que é um ótimo momento para animar o conteúdo uma vez.

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

Ajuste de x e y em um botão 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. Essa demonstração esclarece como o elemento ao qual o navegador é vinculado nem sempre é o que você pensa que é.

Dois controles de rolagem vinculados

Esta demonstração tem dois contêineres de ajuste de rolagem. Um deles é uma lista de links de alto nível e o outro é o conteúdo paginado em si. Com o novo evento scrollSnapChanging, é fácil vincular os estados de ajuste bidirecionalmente para que eles estejam sempre sincronizados.

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 ajustado é sincronizado com o grupo de opções relevante, e os dados podem ser recuperados de um formulário que encapsula as entradas. Para um usuário de mouse ou de toque, role até o valor desejado. Para usuários de teclado, é possível usar a tecla Tab e usar as teclas de seta. Para um leitor de tela, isso é apenas um formulário.

Captura de hubs animados surpreendentes

Essa demonstração melhora 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
}

Entrada da régua rolável

Esta demonstração apresenta uma régua rolável como uma maneira alternativa de escolher o comprimento para uma entrada numérica. Digite os valores diretamente na entrada numérica ou role 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.

Fluxo de cobertura

Esta demonstração se baseia na excelente recriação de animações de rolagem de Bramus Van Damme do famoso fluxo de capa do macOS (tutorial em vídeo). Exclusivamente, scrollSnapChanging é usado para ocultar o título do álbum e scrollSnapChange é usado para apresentar o título. Os eventos ajudam a organizar um esconderijo ansioso do título antigo e uma apresentação preguiçosa do novo.

Mais ideias para inspirar criatividade

Agora que é trivial saber qual elemento está prestes a ser capturado e qual está sendo capturado ativamente, existem muitas novas possibilidades. Aqui está uma lista de ideias para ajudar a inspirar a criatividade e casos de uso adicionais:

• Acionamento do carregamento lento, conhecido como renderização acionada pelo Snapchange ou busca de dados.
• Miniaturas de tira de filme vinculadas a uma imagem maior.
• Alternando entre reproduzir/pausar para um trailer de vídeo para uma miniatura de vídeo capturada.
• Acompanhamento do Google Analytics
• Rolagem
• Usuário/UX Roda da Fortuna
• O alvo do ajuste recebe uma dica ancorada.
• Toque para ajustar
• Ajustar à tela
• Sons no momento
• Interface de deslizar
• Guias ou carrosséis deslizantes

Estudos adicionais

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

Recursos:

• Especificações de CSS
• Explicações sobre o Snap Snap
• Coleção CodePen