overflow:scroll und mobile Browser

Also auf meinem Galaxy SII geht das mit dem Scrollen in DIVs mit fester Höher und der CSS-Eigenschaft overflow:scroll ohne Probleme, aber viele andere mobile Browser interpretieren den Überschuss einfach als hidden, oder vergrößern die Box - beides nicht erwünscht.
Eine recht einfache Lösung ist das Script "iscroll".
Statt meinen zu scrollenden Bereich einfach mit einer Klasse ".scroll" zu versehen und diese dann mit

 .scroll {
    overflow-y: scroll;
}

scrollend zu machen, braucht es noch ein zusätzliches DIV:

<div id="wrapper">
    <div id="scroller">
        Es wird nämlich nur das erste Child-Element von #wrapper gescrollt und meistens folgen bei mir einige <p></p>'s o.a.
    </div>
</div>

Im Head dann noch schnell das iscroll einbinden:

<script src="/js/iscroll-lite.js"></script>
<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Und die Sache läuft. Jetzt kann es halt sein, dass der normale Desktop-Browser auch keine Scrollbalken mehr zeigt und der Inhalt gleich wie auf einem Touch-Gerät "geschoben" werden muss. Um das zu verhindern, sollte man das Script nur laden, falls ein mobiler Browser zum Einsatz kommt.
Bei Detect Mobile Browsers gibt es dazu recht einfache Scripts zum Einbauen. Wer es gern umfangreicher hat, kann zum beispiel auch die PHP-Klasse "Mobile Detect" einbinden.