Então você está fazendo o seu primeiro web app e descobre que problema com rolagem é algo que você nunca imaginou que teria. Fique tranquilo, essa não é a primeira vez que isso acontece com alguém. Há dois anos, quando desenvolvia um web app que utilizaria intensamente vários tipos de gestos, tive um grande problema. E consegui achar a solução no iScroll.

Essa é uma ferramenta madura, que há seis anos vem sendo melhorada. E o melhor de tudo é que ela não trabalha só a questão da rolagem, mas também outros gestos como zoom, tap e snap. Também é possível configurar vários eventos, o indicador de rolagem, além de várias outras opções. Tudo está disponível no site oficial e na breve documentação disponível na página deles no GitHub.

Veja os exemplos abaixo e compare o comportamento da rolagem do conteúdo. Para isso você vai precisar de um smartphone com acesso à internet.

Teste a rolagem dessa página SEM o iScroll. Utilize um leitor de QR-code ou acesse pelo seu telefone o endereço: http://cdpn.io/FLuGD

Eu vou tentar ser prático. Você pode correr para um lado, correr para o outro mas, certamente, o iScroll vai ser a solução para os seus problemas. Veja agora como a rolagem tem um comportamento diferente. Utilize o leitor de código QR ou acesse o endereço a seguir pelo seu telefone: http://cdpn.io/kGoph

Veja como é fácil usar o iScroll:

Você carrega o o script do iScroll que não depende de outra biblioteca.

<script type="text/javascript" src="iscroll.js"></script>

E cria uma instância do iScroll apontando para o elemento que fará a rolagem. Detalhe: o elemento que receberá o iScroll é aquele que você aplicaria um overflow: auto.

//Cria uma instância do iScroll passando um seletor que aponta para o elemento que fará a rolagem. var scroller = new IScroll(“#scroller”) //Obs: Repare no css que o #scroller tem o overflow: hidden; //Para desabilitar o scrolling elástico document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, false); See the Pen JS – iScroll by Dennis Calazans (@denniscalazans) on CodePen.