Rolando docemente

A rolagem de elementos nos dispositivos móveis é bem suave, bem fluída, bem bonita. E o mais legal é que ela mantem inércia, rolando os elementos sem parar.

Quando uma página web é aberta no browser mobile a página fica com o mesmo esquema de rolagem. O problema é quando um outro elemento é que está com rolagem, um “div” por exemplo. Alem de ficar com a barra de rolagem feia não existe inércia.

Mas espere, os seus problemas acabaram, basta colocar o estilo abaixo que o elemento terá o comportamento desejo. Simples assim.

-webkit-overflow-scrolling: touch;

Óbvio que não funciona no IE.

Anúncios

Vou te dar um toque.

Os tablets/smartphones estão dominando o mercado, a principal forma de iteração com o disposição é através de gestos (pinçar, rotacionar, deslizar). As páginas web estão tendo que adotar esse comportamento para permitir uma melhor experiência para o usuário.

A extensão http://eightmedia.github.io/hammer.js/ fornece uma forma bem mais fácil de lidar com esses gestos. O feedback para o programador é apresentado com mais informações como por exemplo, deslocamento, ângulo, tipo do gesto entre outros.

Vale a pena dar uma olhada.

Pegando e levando pela mão

Dispositivos touch (smartphones, tablets, e ultrabooks) são cada vez mais frequentes nas nossas vida. Uma coisa que já comentei foi sobre trabalhar com design responsivo, fazendo com que o conteúdo seja mostrado da melhor forma de acordo com o tamanho da tela.Também comentei sobre o recurso de drag’n’drop que facilita bastante algumas operações para o usuário.

Fui pesquisar como fazer tudo misturado, fazer drag’n’drop no celular. A grande diferença é que o touch não tem mouse (óbvio) o que causa algumas modificações no comportamento do browser.

Por exemplo: caso um elemento tenha um “hover” (comportamento quando o cursor do mouse fica sobre o elemento), este comportamento é feito quando o usuário toca 1 vez sobre o elemento. O click funciona no próximo toque.

Dessa forma o jquery UI não consegue realizar o drag’n’drop normalmente. Procurando um pouco encontrei o jQuery UI Touch Punch (http://touchpunch.furf.com/). Com esse script é possível, sem nenhum codificação extra, realizar drag’n’drop com o toque.

Fiz um exemplo em http://jsfiddle.net/caliel/ZDKAD/2/ e funcionou perfeitamente. Graças a isso as facilidades do mouse se juntam a facilidade do touch. O melhor de dois mundos.