Introdução ao visualViewport

Jake Archibald

E se eu disser que há mais de uma viewport?

BRRRRAAAAAAMMMMMMMMMM

E a janela de visualização que você está usando agora é uma janela de visualização dentro de uma janela de visualização.

BRRRRAAAAAAMMMMMMMMMM

Às vezes, os dados fornecidos pelo DOM se referem a uma das viewports e não à outra.

BRRRRAAAAM… espera aí.

É verdade, confira:

Janela de visualização de layout x janela de visualização visual

O vídeo acima mostra uma página da Web sendo rolada e com zoom, além de um minimapa à direita mostrando a posição das viewports na página.

As coisas são bem simples durante a rolagem normal. A área verde representa a viewport do layout, que os itens position: fixed grudam.

As coisas ficam estranhas quando o zoom por pinça é introduzido. A caixa vermelha representa a janela de visualização, que é a parte da página que podemos ver. Essa janela de visualização pode se mover enquanto os elementos position: fixed permanecem onde estavam, anexados à janela de visualização do layout. Se você mover o cursor em um limite da janela de visualização do layout, ela vai arrastar a janela de visualização do layout.

Como melhorar a compatibilidade

Infelizmente, as APIs da Web são inconsistentes em termos de qual viewport elas se referem e também são inconsistentes entre os navegadores.

Por exemplo, element.getBoundingClientRect().y retorna o deslocamento dentro da janela de visualização do layout. Isso é legal, mas muitas vezes queremos a posição na página. Então escrevemos:

element.getBoundingClientRect().y + window.scrollY

No entanto, muitos navegadores usam a janela de visualização visual para window.scrollY, o que significa que o código acima é interrompido quando o usuário faz zoom.

O Chrome 61 muda window.scrollY para se referir à viewport do layout, o que significa que o código acima funciona mesmo com zoom de pinça. Na verdade, os navegadores estão mudando lentamente todas as propriedades posicionais para se referir à janela de visualização de layout.

Com exceção de uma nova propriedade…

Como expor a janela de visualização visual para o script

Uma nova API expõe a área de visualização visual como window.visualViewport. É um rascunho de especificação, com aprovação em vários navegadores, e está sendo lançado no Chrome 61.

console.log(window.visualViewport.width);

Confira o que window.visualViewport nos dá:

Há também alguns eventos:

window.visualViewport.addEventListener('resize', listener);

Demonstração

O vídeo no início deste artigo foi criado usando visualViewport. Confira no Chrome 61 ou mais recente. Ele usa visualViewport para fixar o minimapa no canto superior direito da viewport visual e aplica uma escala inversa para que ele sempre apareça com o mesmo tamanho, mesmo com o gesto de pinça.

Problemas

Os eventos só são acionados quando a viewport visual muda

Parece uma coisa óbvia de declarar, mas me surpreendeu quando joguei com visualViewport pela primeira vez.

Se a viewport de layout for redimensionada, mas a viewport visual não for, você não receberá um evento resize. No entanto, é incomum que a janela de visualização de layout seja redimensionada sem que a janela de visualização visual também mude a largura/altura.

O problema real é a rolagem. Se a rolagem ocorrer, mas a viewport visual permanecer estática em relação à viewport de layout, você não receberá um evento scroll em visualViewport, e isso é muito comum. Durante a rolagem normal do documento, a janela de visualização visual fica bloqueada no canto superior esquerdo da janela de visualização do layout. Por isso, scroll não é acionado em visualViewport.

Se você quiser saber sobre todas as mudanças na viewport visual, incluindo pageTop e pageLeft, também vai precisar detectar o evento de rolagem da janela:

visualViewport.addEventListener('scroll', update);
visualViewport.addEventListener('resize', update);
window.addEventListener('scroll', update);

Evitar trabalho duplicado com vários listeners

Assim como detectar scroll e resize na janela, é provável que você chame algum tipo de função "update" como resultado. No entanto, é comum que muitos desses eventos aconteçam ao mesmo tempo. Se o usuário redimensionar a janela, ela acionará resize, mas também scroll com bastante frequência. Para melhorar o desempenho, evite processar a mudança várias vezes:

// Add listeners
visualViewport.addEventListener('scroll', update);
visualViewport.addEventListener('resize', update);
addEventListener('scroll', update);

let pendingUpdate = false;

function update() {
    // If we're already going to handle an update, return
    if (pendingUpdate) return;

    pendingUpdate = true;

    // Use requestAnimationFrame so the update happens before next render
    requestAnimationFrame(() => {
    pendingUpdate = false;

    // Handle update here
    });
}

Enviei uma questão de especificação para isso, porque acho que pode haver uma maneira melhor, como um único evento update.

Os manipuladores de eventos não funcionam

Devido a um bug do Chrome, isso não funciona:

visualViewport.onscroll = () => console.log('scroll!');

Em vez disso, faça o seguinte:

visualViewport.addEventListener('scroll', () => console.log('scroll'));

Os valores de deslocamento são arredondados

Acho que isso é outro bug do Chrome.

offsetLeft e offsetTop são arredondados, o que é bastante impreciso depois que o usuário aumenta o zoom. É possível notar os problemas com isso durante a demonstração. Se o usuário aproximar e mover lentamente, o minimapa vai se encaixar entre os pixels sem zoom.

A taxa de eventos é lenta

Assim como outros eventos resize e scroll, eles não são acionados em todos os frames, principalmente em dispositivos móveis. Você pode conferir isso durante a demonstração. Depois de aplicar o zoom, o minimapa tem problemas para permanecer fixado na janela de visualização.

Acessibilidade

Na demonstração, usei visualViewport para evitar o zoom de pinça do usuário. Isso faz sentido para esta demonstração específica, mas pense bem antes de fazer qualquer coisa que substitua o desejo do usuário de aumentar o zoom.

O visualViewport pode ser usado para melhorar a acessibilidade. Por exemplo, se o usuário estiver aumentando o zoom, você pode ocultar itens decorativos position: fixed para tirá-los do caminho do usuário. Mas, novamente, tome cuidado para não ocultar algo que o usuário esteja tentando analisar mais de perto.

Você pode considerar postar em um serviço de análise quando o usuário ampliar. Isso pode ajudar a identificar páginas que os usuários estão tendo dificuldade no nível de zoom padrão.

visualViewport.addEventListener('resize', () => {
    if (visualViewport.scale > 1) {
    // Post data to analytics service
    }
});

Pronto. visualViewport é uma API que resolve problemas de compatibilidade.