Overflow

Mit overflow kann bestimmt werden, wie übergroße innere Elemente organisiert werden.

HTML

In diesem Beispiel werden zwei html div Elemente benötigt. div id=scroll bekommt vom CSS Breite und Höhe. div id=oneline bekommt den Inhalt.

<div id="scroll">
<div id="oneline"> hat den Inhalt
  <img src="/files/images/scroll-layer/01.jpg" alt="" border="0" />
  <img src="/files/images/scroll-layer/02.jpg" alt="" border="0" />
  <img src="/files/images/scroll-layer/03.jpg" alt="" border="0" />
  <img src="/files/images/scroll-layer/04.jpg" alt="" border="0" />
  <img src="/files/images/scroll-layer/05.jpg" alt="" border="0" />
  <p>Bilder © <a href="http://www.etoy.com">etoy.com</a></p>
</div> <!-- end oneline -->
</div> <!-- end scroll -->

Für dieses Layout wurde die Breite (width: 500px;) entfernt, damit sich der Scrollayer dynamisch den Inhalt anpasst beim verkleinern des Browserfensters.

CSS

#scroll bekommt eine fixe Breite und Höhe. Der Scrollbalken erscheint erst wenn der Inhalt von #oneline grösser ist als die definierte Breite oder Höhe. Ist der Inhalt nur breiter, erscheint ein horizontaler Scrollbalken. Ist der Inhalt breiter und höher, erscheint vertikal und horizontal ein Scrollbalken.

#scroll { 
  height:180px;
  width: 500px;  
  margin:10px 50px;
  border: solid 1px #000000; 
  background-color:#564b47;
  color:#fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  }

Die Definition white-space:nowrap verhindert ein ungewolltes Umbrechen der Bildzeile.

#oneline {  white-space: nowrap;}

#oneline img{ 
  margin: 5px; 
  border: 3px solid #333;
  background-color: #000;
  }
#oneline p{ 
  margin: 0 5px; 
  padding: 0;
  }

Werte für overflow

visible: Inhalt ist komplett sichtbar und ragt aus dem Element.
hidden: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist.
scroll: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist. Das Element bekommt einen Scrollbalken, ähnlich wie bei einem iFrame.
auto: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist und bekommt den Scrollbalken der benötigt wrird.

iOS5

Damit der overflow auf dem iPad und dem iPhone funktionieren braucht es eine zusatzzeile Code. Funktioniert erst ab iOS5. -webkit-overflow-scrolling: touch;