201227Feb

Overthrow: Polyfill für dynamische Scroll-Bereiche

Das CSS-Attribut "overflow" bietet schon lange die Möglichkeit, Container mit einem Scrollbalken zu versehen, so dass deren Inhalt explizit in diesem Bereich gescrollt werden kann. Voraussetzung ist, dass die Höhe des Inhalts über die festgelegte Größe des äußeren Containers hinausragt. Mit "overflow:auto;" werden die Scrollbalken eingeblendet. In Desktop-Browsern kein Problem, auf mobilen Geräten nur teilweise möglich: Moderne Smartphone- oder Tablet-Browser, die etwa mit einer aktuellen WebKit-Engine ausgestattet sind, können das CSS-Attribut problemlos verarbeiten. In Verbindung mit der Eigenschaft

  • -webkit-overflow-scrolling: touch;

wird auf dem mobilen Endgerät das dynamische Scrollen (durch Beschleunigen und Abbremsen) aktiviert. Leider ist das Feststellen der "Overflow"-Eigenschaften des Zielbrowsers nicht ganz einfach. Abhilfe schafft hier ein Skript wie Overthrow, das die notwendige Erkennung durchführt.

Overthrow - An overflow polyfill for responsive design

So kann das gewünschte Container-Element einfach mit "overflow:auto;" versehen werden und in Browsern, in denen die Eigenschaft nativ nicht unterstützt wird, kommt das Overthrow-Skript zum Tragen. Hier wird das Verhalten simuliert, so dass der gewünschte Effekt auf allen Browsern ermöglicht wird. Die Demo-Seite zeigt Overthrow in Aktion und bei GitHub steht das Skript zum Download bereit.

Kommentare

Kevin schrieb am 12.03.2012 #1

An sich keine schlechte Idee, allerdings fällt mir gerade nicht auf die schnelle ein Anwendungsbereich ein… also ist es eher unbrauchbar, oder?