Problema de rolagem de HTML em iframe no iOS
O "Causo"
Recentemente tive um problema que, consultando vários fóruns, confirmei que realmente existe uma situação única de problema de rolagem de conteúdo HTML em um iframe em qualquer browser executado no iOS.
Como é que funciona?
Os browsers em dispositivos móveis adequam a rolagem de conteúdo com aquela forma elástica que ocorre quando a gente segura a tela com o dedo e arrasta para cima ou para baixo e então soltando o conteúdo vai rolando na direção que soltou sozinho até parar.
Nessa condição a scrollbar padrão, aquela feiura antiquada, dá lugar a outra, e o comportamento de clique muda também para se comportar da maneira citada, toque, segura e solta.
Essa mudança de visual e funcionamento difere da execução em desktop em que aparece a barra de rolagem e o conteúdo rola apenas ao clicar na barra lateral ou com teclas de atalho (page down, up e etc), e se segurar o cursor do mouse com o clique em algum ponto irá marcar texto (alguns browser permitem mudar esse comportamento para tipo o estilo mobile).
Sim, mas e daí?
Esbarrei pelo problema usando o Ext.Net (ExtJS), na verdade não é culpa dele, mas sim do iframe em que o conteúdo HTML é embutido. O funcionamento do sistema era abrir rotas/URLs em janelas dentro da principal simulando o funcionamento de janelas do Windows por exemplo, mas para isso a parte interna das janelas é um iframe.
O fato apenas ocorre no iOS, em qualquer Android funciona, no caso não havia a mudança para o estilo mobile, continuava o HTML com rolagem estilo desktop.
Então depois de algumas pesquisas em fóruns, vários indicavam a pequena iscrolljs.com.
Basicamente o funcionamento é o de se colocar uma DIV dentro de outra DIV, cada uma com o seu devido CSS aplicado (tem tudo no site), e no onLoad() da página instanciar um objeto da iScroll (bastante sugestivo o prefixo do nome).
Na minha aplicação passei por mais problemas, pois trabalhando com o ExtJS vi que não poderia utilizar os Ext.Panels padrões pela injeção de HTML indesejado, cheguei até a testar mas não funcionou, de qualquer maneira consegui contornar usando o iScroll na forma mais simples, pelos próprios exemplos do site dele.
Eu cheguei a ver algumas soluções baseadas em ExtJS mas achei muito, mas muito complexas, exageradamente...criação de componentes com herança, eventos e etc, muita ladainha para uma necessidade mais direta de aplicar, e olha que no meu caso eu tinha alguns poréns a mais:
Só serve para isso?
Não!
Existem algumas outras funções bastante interessantes como zoom, scroll infinito (carga de HTML por demanda) e outras, que um dia irei explorar, o importante é saber que há como fazer e o iScroll é a solução atual mais simples e leve de aplicar.
Mas lembre-se!
Apenas para ficar ciente, o comportamento do scroll de conteúdo passará a ser "estilo" mobile mesmo em browser no desktop, ou seja, para rolar tem-se que clicar, segurar e jogar o cursor para uma direção, prático como se utiliza um tablet e celular, mas pode ser que alguns usuários estranhem no desktop.
Recentemente tive um problema que, consultando vários fóruns, confirmei que realmente existe uma situação única de problema de rolagem de conteúdo HTML em um iframe em qualquer browser executado no iOS.
Como é que funciona?
Os browsers em dispositivos móveis adequam a rolagem de conteúdo com aquela forma elástica que ocorre quando a gente segura a tela com o dedo e arrasta para cima ou para baixo e então soltando o conteúdo vai rolando na direção que soltou sozinho até parar.
Nessa condição a scrollbar padrão, aquela feiura antiquada, dá lugar a outra, e o comportamento de clique muda também para se comportar da maneira citada, toque, segura e solta.
Essa mudança de visual e funcionamento difere da execução em desktop em que aparece a barra de rolagem e o conteúdo rola apenas ao clicar na barra lateral ou com teclas de atalho (page down, up e etc), e se segurar o cursor do mouse com o clique em algum ponto irá marcar texto (alguns browser permitem mudar esse comportamento para tipo o estilo mobile).
Sim, mas e daí?
Esbarrei pelo problema usando o Ext.Net (ExtJS), na verdade não é culpa dele, mas sim do iframe em que o conteúdo HTML é embutido. O funcionamento do sistema era abrir rotas/URLs em janelas dentro da principal simulando o funcionamento de janelas do Windows por exemplo, mas para isso a parte interna das janelas é um iframe.
O fato apenas ocorre no iOS, em qualquer Android funciona, no caso não havia a mudança para o estilo mobile, continuava o HTML com rolagem estilo desktop.
Então depois de algumas pesquisas em fóruns, vários indicavam a pequena iscrolljs.com.
Basicamente o funcionamento é o de se colocar uma DIV dentro de outra DIV, cada uma com o seu devido CSS aplicado (tem tudo no site), e no onLoad() da página instanciar um objeto da iScroll (bastante sugestivo o prefixo do nome).
Na minha aplicação passei por mais problemas, pois trabalhando com o ExtJS vi que não poderia utilizar os Ext.Panels padrões pela injeção de HTML indesejado, cheguei até a testar mas não funcionou, de qualquer maneira consegui contornar usando o iScroll na forma mais simples, pelos próprios exemplos do site dele.
Eu cheguei a ver algumas soluções baseadas em ExtJS mas achei muito, mas muito complexas, exageradamente...criação de componentes com herança, eventos e etc, muita ladainha para uma necessidade mais direta de aplicar, e olha que no meu caso eu tinha alguns poréns a mais:
- Store é atualizada disparando evento DataChanged...
- ...DataView atrelada à Store renderiza conteúdo...
- ...captura do HTML renderizado na DataView...
- ...injeção do HTML dentro da DIV mais interna usada pelo iScroll.
Só serve para isso?
Não!
Existem algumas outras funções bastante interessantes como zoom, scroll infinito (carga de HTML por demanda) e outras, que um dia irei explorar, o importante é saber que há como fazer e o iScroll é a solução atual mais simples e leve de aplicar.
Mas lembre-se!
Apenas para ficar ciente, o comportamento do scroll de conteúdo passará a ser "estilo" mobile mesmo em browser no desktop, ou seja, para rolar tem-se que clicar, segurar e jogar o cursor para uma direção, prático como se utiliza um tablet e celular, mas pode ser que alguns usuários estranhem no desktop.
Comentários
Postar um comentário