Wie man ein Div Scrollable machen

Webentwickler können verwenden, HTML und CSS (Cascading Style Sheets) Code bestimmen Inhalt und Darstellung von Web-Seiten. Beide Arten von Code können auch Aspekte der Interaktion des Benutzers mit einer Seite diktieren. Um ein Div-Element innerhalb einer Seite bildlauffähigen machen können Sie die CSS-Eigenschaft Overflow. Elemente ist bildlauffähigen nicht in der Regel schwierig, erfordert nur wenige einfache Zeilen Code. Ein HTML-Element möglich bildlauffähigen sowohl horizontal als auch vertikal.

Anweisungen

1 Erstellen Sie Ihre HTML-Seite. Definieren Sie im folgenden Markup-Beispielcode verwenden, den Umriss einer Webseite:

< html >

< Head >

< / head >

< Körper >

< / body >

< / html >

Öffnen Sie eine neue Datei in einem Text-Editor, und kopieren Sie diesen Code hinein, mit der Endung .html speichern. Wenn Sie bereits eine Webseite mit einem Div drin haben, können Sie dies anstatt eine neue zu erstellen.

2 Erstellen Sie einen Abschnitt innerhalb Ihrer Seite für CSS-Code. Können Sie einen Link CSS-Code aus einer separaten CSS-Datei innerhalb Ihrer Seite < Head > Abschnitt, oder direkt durch den Code in den < Head >-Abschnitt enthalten kann. Dazu fügen Sie den folgenden Abschnitt zwischen dem öffnenden und < Schließkopf > Tag in Ihre HTML-Seite:

< Typ style = "Text/Css" >

/CSS-Code/

< / style >

Platzieren Sie Ihre CSS-Code zwischen diesen Stil-Tags.

3 Ein Div-Element Ihrer Seite hinzufügen. Fügen Sie den folgenden Beispiel Markup-Code zwischen den öffnenden und schließen < Körper > Tags:

< Div Id = "Content" >< p > hier ist einige Inhalte innerhalb eines Absatzes, die in ein Element. </p >< ist / Div >

Dieses einfache Element hat ein Id-Attribut, so der CSS-Code innerhalb der Seite als Ganzes identifiziert werden kann. Sie können alle Inhalte einschließen, die Sie innerhalb Ihrer Div-Element, einschließlich Text, Bilder und andere Medien mögen.

4 Fügen Sie die CSS-Regeln für das Element. Innerhalb des Style-Abschnitt Ihrer Seite fügen Sie den folgenden Code identifizieren das Div-Element und Anwendung bestimmter Stil auf sie:

Inhalt {} Höhe: 100px;

Breite: 100px;

Overflow: Scroll;

}

Dieser Code legt eine feste Breite und Höhe für das Element, als auch anweisen, den Browser überfüllt diesbezügliche Inhalte scrollen. Damit Sie die Scroll-Eigenschaft verwenden müssen Ihre Elemente bestimmte Dimensionen haben, wie die Scroll-Eigenschaft dem Browser mitteilt, was Sie mit den Inhalten zu tun, wenn es nicht in den reservierten Speicherplatz für ein Element passt.

5 Speichern Sie die HTML-Datei, und öffnen Sie sie in einem Webbrowser. Sie sollten ein oder zwei Bildlaufleisten, um das Div-Element sehen. Experimentieren Sie mit Ihrem Code durch Änderung der Abmessungen, wobei die Overflow-Eigenschaft festgelegt, um zu blättern. Die Bildlaufleisten werden unterschiedlich verhalten, je nach Abmessung des Elements und auf wie viel Inhalt drin ist.

Tipps & Warnungen

• Versuchen Sie mit anderen Werten für die Scroll-Eigenschaft, wie z. B. ausgeblendet, um die verschiedenen Möglichkeiten zu sehen.
• Einige Browser können nicht die Scroll-Eigenschaft korrekt, insbesondere Browser auf mobilen Geräten ausgeführt implementieren.