Scrollable div no iPhone sem usar 2 dedos?

Question

Eu tenho um UIWebView incorporado no meu iPhone app, e eu gostaria de manter um cabeçalho e rodapé DIV bloqueado na página em todos os momentos, com um DIV centro de rolagem.

Eu sei que eu poderia fazer isso usando um cabeçalho / rodapé que são controles UIView, mas eu quero o cabeçalho e rodapé para ser divs de HTML, como uma solução puro HTML / JS / CSS será mais fácil para a porta para Android / PalmPre / AdobeAir, que vai ser na minha lista de tarefas relativamente breve.

Eu posso fazer isso usando técnicas como o mencionado aqui:

http://defunc.com/blog/?p=94

Mas isso requer que o uso de usuário 2 dedos para rolar a div, o que não é satisfatório para mim ...

Todas as sugestões sobre como fazer isso?

Obrigado,

Brad

Answer 1

eu encontrei alguém que implementou uma solução reutilizável para isso, com um cabeçalho e um rodapé:

http://cubiq.org/iscroll-4

Answer 2

Eu não estou muito familiarizado com o UIWebView, então esta pode ser uma sugestão totalmente tolo. Mas há algo que você parar de ter três UIWebViews na página? Uma para o cabeçalho, um para o corpo, e um para o rodapé. Porque dividindo-o soa como a idéia de direito.

Answer 3

É isso que você está procurando? Abrir esta ligação no seu dispositivo ou simulador de iPhone .

O arquivo index.html tem três elementos div para "cabeçalho", "container" e "rodapé" diretamente sob o corpo, enquanto todo o trabalho é feito no arquivo fixed.js. O documento é fixada no lugar, cancelando a ação normal para o evento "TouchMove":

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

Em seguida, um monte de trabalho vai para a criação de ouvintes de eventos para o "touchstart", "TouchMove" e eventos "touchend", que estão ligados ao div "conteúdo" em "container". A lógica se resume a simplesmente movendo o "conteúdo" Div cima e para baixo.

Esta solução é 100% HTML / CSS / JavaScript, no entanto, há alguns WebKit CSS proprietárias e JavaScript que pode limitar a portabilidade. Pode demorar um pouco de ajustes para o trabalho em outro dispositivo móvel, mas esta seria uma prova de conceito de boa para começar.

Eu não criei este projeto de exemplo impressionante, eu sou apenas trazê-lo para a atenção da comunidade. Para mais informações e um link para o projeto zipado, leia Richard "Doctyper" todo o post de Herrara em posicionamento fixo no mobile Safari .

Answer 4

Pode ser desajeitado, mas você pode reposicionar o cabeçalho e rodapé ao longo do topo da div como o usuário rola. Desta forma, o div principal não precisa ser de rolagem. Nenhuma ajuda para nada (ainda) usando quadros embora.

Este é um dos mais irritantes problemas com o navegador com o iPhone / touch, eu gostaria que você pudesse se concentrar apenas em parte da página como um navegador normal.

Answer 5

Para uma CSS única referência ao Safari CSS Referência provavelmente tem o que você está procurando. Você vai ser especialmente interessado em qualquer coisa que começa com "-webkit" ou "-khtml" como aqueles que são estendidos propriedades disponível apenas com WebKit como 3D e toques. Deve aplicar-se para o Android também.

Com JavaScript introdução ao WebKit DOM tópicos de programação e WebKit DOM API Referência são go-to guias. Definitivamente dar uma olhada -mesa de luz a demo por algum copiar e colar o javascript no lidar com seus toques como É assim que eu iria resolver isso.

Answer 6

Eu tenho implementado iScroll no iPhone e é realmente bom e rápido e você pode fazer o que quiser. As desvantagens são que o Android (1.6) se recusa a rolar como eu queria e, por vezes bloquear outro javascript se houver algum.

Answer 7

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

Adicionar aqueles ao seu código html pode resolver seu problema.