Exportar (0) Imprimir
Expandir Tudo

Rolagem e zoom com toque

Observação  As propriedades descritas nesta seção não são suportadas no Windows 7.

Os dois componentes principais das interações por toque sãorolagem (ou panorâmico) e zoom. Páginas da web e aplicativos habilitados para toque usam rolagem e zoom para permitir aos usuários acessar mais conteúdo, mover pelos itens em uma lista, ver mais detalhes em uma foto e muito mais.

Quando é necessário saber mais sobre como o usuário está fazendo, você usa os eventos de ponteiro e gestos, que são descritos em detalhes em Eventos de gesto e ponteiro. Este arquivo aborda os métodos que você pode usar para controlar os modos de exibição de rolagem e zoom da sua página da Web otimizada para toque no Internet Explorer 10 ou em seu aplicativo da Windows Store em JavaScript no Windows 8.

Aspectos que você pode controlar

Modos de exibição de rolagem e zoom são a experiência mais complexa quando se trata de toque Usuários baseiam suas primeiras opiniões do seu aplicativo ou página da web dependendo do que acontece quando ele toca pela primeira vez na tela e desliza seus dedos por ela. Tendo isso em mente, existem muitos detalhes e nuanças para oferecer uma grande experiência

Interações gerais que seus usuários esperam que "simplesmente funcione" incluem:

  • Conteúdo para rolagem (ou panorâmico) por toque na tela e, em seguida, deslizar o dedos para revelar mais conteúdo
  • Aplicar zoom na imagem da tela pelo movimento de pinçagem na tela para aplicar zoom e realizando o movimento de pinçagem ao contrário para reduzir o zoom ou por toque duplo em um elemento de nível superior (Internet Explorer somente na nova interface do usuário do Windows)
  • A inércia que continua rolando o conteúdo é um forma previsível depois que o dedo do usuário deixa a tela
  • As áreas de conteúdo que saltam quando a área que está sendo rolada atinge as bordas
  • Áreas de rolagem ou zoom que são aninhadas dentro de outras áreas de rolagem ou zoom e que se comportam como os usuários esperam
  • Pontos de ajuste que, quando aplicados nos locais principais, facilitam aos usuários obter esses locais ao rolar ou aplicar zoom
  • Controles que se integram de maneira transparente ao rolar ou ampliar o conteúdo; botões e outros elementos de interface dentro do conteúdo responde como esperado, sem disparar o comportamento de rolagem ou zoom

Felizmente, o Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript no Windows 8 têm esses recursos integrados. No entanto, é possível fazer um ajuste fino de muitas dessas interações usando diversas novas propriedades de CSS (Folhas de Estilos em Cascata).

Controlando o comportamento da rolagem

É possível controlar o comportamento da rolagem com as propriedades CSS descritas nesta seção.

Observação  Para ver um exemplo de código que incorpora essas propriedades no Cenário 1: Panorâmico – Controlando os movimentos panorâmicos que um usuário pode fazer, no exemplo Rolagem, panorâmico e zoom com entrada por toque na Galeria de Amostras do Internet Explorer no MSDN.

Controlando a área de rolagem

Com as propriedades CSS a seguir, é possível controlar o tamanho da área que pode ser rolada. Essas propriedades não têm efeito sobre elementos que não podem ser rolados.

PropriedadeDescrição

-ms-scroll-limit

A propriedade abreviada que especifica valores as propriedades -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max e -ms-scroll-limit-y-max.

-ms-scroll-limit-x-max

Especifica o valor máximo para a propriedade scrollLeft.

-ms-scroll-limit-x-min

Especifica o valor mínimo para a propriedade scrollLeft.

-ms-scroll-limit-y-max

Especifica o valor máximo para a propriedade scrollTop.

-ms-scroll-limit-y-min

Especifica o valor mínimo para a propriedade scrollTop.

 

Métodos de controle da rolagem

É possível controlar os métodos de rolagem para elementos que ultrapassem—uma barra de rolagem clássica, uma barra de rolagem de auto-ocultar ou nada—usando essa propriedade CSS.

PropriedadeDescrição

-ms-overflow-style

Especifica os métodos de rolagem preferidos para elementos que estouram.

 

Indicando trilhos de rolagem

Com essa propriedade CSS, é possível controlar os bloqueios da rolagem com o eixo de movimento—vertical ou horizontal—ou seguir exatamente o dedo do usuário, permitindo efetivamente uma rolagem de livre formato.

PropriedadeDescrição

-ms-scroll-rails

Indica se a rolagem bloqueará o eixo de movimento primário.

 

Convertendo o movimento da roda de rolagem

Se seu JavaScript está escutando eventos DOM (Document Object Model) de roda de rolagem, os eventos que ocorrem quando o usuário rola verticalmente sempre serão eventos de rolagem vertical e não eventos de rolagem horizontal. Da mesma forma, os eventos que ocorrem quando o usuário rola horizontalmente sempre serão eventos de rolagem vertical.

É possível usar a propriedade CSS a seguir para alterar esse comportamento para eventos de rolagem vertical.

PropriedadeDescrição

-ms-scroll-translation

Especifica se a conversão da roda de rolagem vertical para horizontal ocorre no elemento especificado. O valor de vertical-to-horizontal indica que os eventos de rolagem vertical devem ser interpretados como seus eventos de rolagem horizontal correspondentes, enquanto o valor de none indica que nenhuma conversão da roda de rolagem ocorre.

 

Controlando o comportamento do zoom

É possível controlar o comportamento do zoom usando as propriedades CSS descritas aqui.

Observação  Para ver um exemplo de código que incorpora essas propriedades no Cenário 3: Zoom – Permitindo ao usuário aplicar zoom no conteúdo de um elemento, no exemplo Rolagem, panorâmico e zoom com entrada por toque na Galeria de Amostras do Internet Explorer no MSDN.

Habilitando zoom

Use a propriedade a seguir para especificar se o zoom deve ser habilitado para um determinado elemento. Essa propriedade não tem efeito a menos que ultrapasse o permitido em ambos os eixos x e y.

PropriedadeDescrição

-ms-content-zooming

Indica se o zoom está habilitado.

 

Controlando o fator de zoom

Com essas propriedades CSS, é possível controlar o grau ao qual um elemento pode ser ampliado. Essas propriedades não têm efeito sobre elementos que não podem ser ampliados.

PropriedadeDescrição

-ms-content-zoom-limit

A propriedade abreviada que especifica valores as propriedades -ms-content-zoom-limit-min e -ms-content-zoom-limit-max.

-ms-content-zoom-limit-max

Especifica o fator de zoom máximo.

-ms-content-zoom-limit-min

Especifica o fator de zoom mínimo.

 

As propriedades anteriores especificam o fator de zoom pela definição da seguinte propriedade de DOM:

PropriedadeDescrição

msContentZoomFactor

Indica o fator de zoom do conteúdo.

 

Especificando comportamentos de conteúdo rolado ou ampliado aninhado

Após o usuário atingir o limite de zoom ou rolagem em um elemento que foi aninhado dentro de outro elemento ampliado ou rolado, é possível especificar se o elemento pai deve continuar a operação de ampliar ou rolar iniciada em seu elemento filho. Isso é chamado encadeamento de zoom ou de rolagem.

Observação  Para ver um exemplo de código que incorpora essas propriedades no Cenário 4: Encadeamento – Colocando eles juntos, no exemplo Rolagem, panorâmico e zoom com entrada por toque na Galeria de Amostras do Internet Explorer no MSDN.

Especificando o comportamento do encadeamento

É possível especificar o comportamento do encadeamento com essas propriedades CSS. Essas propriedades não têm efeito sobre elementos que não podem ser ampliados ou rolados, respectivamente.

PropriedadeDescrição

-ms-content-zoom-chaining

Indica o comportamento do zoom que ocorre quando um usuário atinge o limite de zoom durante uma manipulação.

-ms-scroll-chaining

Indica o comportamento da rolagem que ocorre quando um usuário atinge o limite da rolagem durante uma manipulação.

 

Determinando o comportamento de toque padrão

Usando a propriedade CSS descrita aqui, é possível determinar o comportamento que é permitido quando um usuário toca uma elemento—por exemplo, rolando ou ampliando. O comportamento do toque é então realizado no elemento ancestral mais próximo que é compatível com esse comportamento, a menos que um elemento ancestral intermediário especifique que o comportamento não é permitido.

Se um comportamento de toque padrão não é invocado, eventos DOM serão disparados esse contato (veja Eventos de ponteiro e gesto).

Observação  Para ver um exemplo de código que incorpora essas propriedades no Cenário 5: Ações para Toque – Obtendo eventos dentro de elementos de movimento panorâmico/zoom, no exemplo Rolagem, panorâmico e zoom com entrada por toque na Galeria de Amostras do Internet Explorer no MSDN.

PropriedadeDescrição

-ms-touch-action

Indica se e como uma determinada região pode ser manipulada pelo usuário.

Os valores possíveis para esta propriedade incluem os seguintes:

  • auto  Valor inicial. Indica que o navegador determinará os comportamentos de toque permitidos para o elemento.
  • none  O elemento não permite comportamentos de toque padrão.
  • pan-x  O elemento permite movimento panorâmico orientado por toque (rolagem) no eixo horizontal. O movimento panorâmico de toque no ancestral mais próximo com conteúdo de rolagem horizontal.
  • pan-y  O elemento permite movimento panorâmico orientado por toque (rolagem) no eixo vertical. O movimento panorâmico de toque é realizado no ancestral mais próximo com conteúdo de rolagem vertical.
  • pinch-zoom  O elemento permite zoom por pinça. O zoom por pinça é realizado no ancestral mais próximo com conteúdo de rolagem vertical.
  • manipulation  O elemento permite rolagem orientada por toque e zoom por pinça. Essa é uma abreviação equivalente de "panorâmico x panorâmico y zoom por pinça".
  • double-tap-zoom  O elemento permite zoom por toque duplo. O zoom por toque duplo é realizado sobre toda a página. O zoom por toque duplo não está disponível em aplicativos da Windows Store que usam JavaScript.

 

Considere o exemplo de um aplicativo de pitura a dedo ou página da web. Nesse exemplo, é importante que a tela não se movimente quando um usuário a toque ou manipule. Quando o seguinte código de exemplo é incluído na CSS da página e um usuário toca nesse canvas e movimenta seu dedo, nenhuma manipulação ocorre. Em vez disso, eventos de DOM serão enviados.


canvas#fingerpainter {
  -ms-touch-action: none;
}

Agora, considere este próximo exemplo, na qual uma lista que realiza o movimento panorâmico na direção x mas permite arrastar ou reorganizar se o usuário agrupa um item na direção y (semelhante a tela inicial do Windows 8). Quando o usuário toca uma listEntry e movimenta seu dedo na direção x, a lista realiza o movimento panorâmico. Se em vez disso o usuário mover seu dedo na direção y, nenhum movimento panorâmico ocorrerá. Em vez disso, eventos de DOM serão enviados.


div.list {
  overflow-x: scroll;
}

div.list > div.listEntry {
  -ms-touch-action: pan-x;
}

Criando pontos de ajuste de conteúdo

Quando um usuário rola ou amplia e, em seguida, levanta se(s) dedo(s), o conteúdo continua a rolar ou a ampliar com alguma inércia. É possível um ajuste fino onde o conteúdo acaba após o fim da inércia usando pontos de ajuste.

É possível aplicar pontos de ajuste nos principais locais no seu conteúdo, assim é mais provável que o principal local seja exibido depois que a inércia parar. Por exemplo, aplique pontos de ajuste de rolagem a uma posição determinada para que seja mais provável que o movimento inercial pouse o leitor nessa posição quando ele, caso contrário, pousaria em algum lugar nas proximidades. Ou, defina pontos de ajuste de zoom para um nível de zoom específico para que, quando um usuário der um toque duplo para reduzir o zoom, a página sempre se ajusta para o nível de zoom.

Colocando pontos de ajuste, você facilita aos usuários manipular seu conteúdo e faz seu conteúdo parar nos lugares principais ou convenientes.

Observação  Para ver um exemplo de código que incorpora essas propriedades no Cenário 2: Definindo e configurando pontos de ajuste, no exemplo Rolagem, panorâmico e zoom com entrada por toque na Galeria de Amostras do Internet Explorer no MSDN.

Pontos de ajuste de rolagem

Essas propriedades CSS permitem definir pontos de ajuste de rolagem no seu conteúdo. Essas propriedades não têm efeito sobre elementos que não podem ser rolados.

PropriedadeDescrição

-ms-scroll-snap-points-x

Define onde os pontos de ajuste estarão localizados no eixo x.

-ms-scroll-snap-points-y

Define onde os pontos de ajuste estarão localizados no eixo y.

-ms-scroll-snap-type

Define qual o tipo de ponto de ajuste será usado para o elemento atual—um ponto de ajuste de proximidade (Quando a inércia normal deixar o conteúdo próximo a um ponto de ajuste, a inércia é ajustada para parar exatamente no ponto de ajuste; no entanto, é possível pousar entre dois pontos de ajuste). ou um ponto de ajuste obrigatório (A inércia é ajustada para garantir que o conteúdo sempre pouse em um ponto de ajuste e nunca passe por ele).

-ms-scroll-snap-x

O valor abreviado que especifica valores para as propriedades -ms-scroll-snap-type e -ms-scroll-snap-points-x.

-ms-scroll-snap-y

O valor abreviado que especifica valores para as propriedades -ms-scroll-snap-type e -ms-scroll-snap-points-y.

 

Pontos de ajuste de zoom de conteúdo

Essas propriedades CSS permitem definir pontos de ajuste de zoom no seu conteúdo. Essas propriedades não têm efeito sobre elementos que não podem ser ampliados.

PropriedadeDescrição

-ms-content-zoom-snap-type

Indica como o zoom é afetado pelos pontos de ajustes definidos.

-ms-content-zoom-snap-points

Define onde os pontos de zoom estão localizados.

-ms-content-zoom-snap

O valor abreviado que define valores para as propriedades -ms-content-zoom-snap-type e -ms-content-zoom-snap-points.

 

Referência de API

Touch: Zooming and Panning

Amostras e tutoriais

Amostra de ponteiros e gestos
Rolagem, movimento panorâmico e zoom com entrada por toque
Como simular foco em dispositivos habilitados para toque
Prepare o seu site para a navegação por toque
Design de sites adaptáveis

Demonstrações do Test Drive do Internet Explorer

Mandelbrot Explorer
Superfície do navegador
Efeitos de toque
Quebra-blocos

Postagens no blog do IE

Habilitando novas experiências de preenchimento interoperáveis por meio da Especificação de Pontos de Ajuste de Rolagem do CSS
W3C cria grupo de trabalho de eventos de ponteiro
Para eventos de ponteiro interoperáveis: desenvolvendo eventos de entrada para vários dispositivos
Vá além do movimento panorâmico, zoom e toque usando eventos de gesto
Diretrizes para criar sites de navegação por toque
Manipulando a entrada multitoque e por mouse em todos os navegadores
Entrada por toque para IE10 e aplicativos da Windows Store

Tópicos relacionados

Eventos de ponteiro e gesto

 

 

Mostrar:
© 2014 Microsoft