JavaScript Scrollbares Div
-
Verwendung der Eigenschaft
overflowzum Scrollen einesdiv-Elements in JavaScript -
Verwenden Sie die Eigenschaften
overflowXundoverflowY, um eindiv-Element in JavaScript zu scrollen
In JavaScript können wir bestimmte Ereignisse manipulieren, die die Benutzeroberfläche verbessern. Oft kann die Leistung einiger CSS-Eigenschaften durch die JavaScript-Implementierung erklärt werden.
So wie das overflow-x in CSS in JavaScript die gleiche Aufgabe erfüllen kann wie overflowX.
Unsere Aufgabe ist es, ein div-Element scrollbar zu machen. Wir werden uns nicht auf die offsetHeight/Width oder die grundlegende Höhe Breite des Inhalts konzentrieren; Stattdessen legen wir ein div mit einer statischen Größe fest.
Der Inhalt kann jedoch von variabler Länge sein. Wir werden zwei Beispiele sehen, die die Verwendung von overflow und overflowX and overflowY behandeln.
Lassen Sie uns die Codes überprüfen.
Verwendung der Eigenschaft overflow zum Scrollen eines div-Elements in JavaScript
Die Eigenschaft overflow für den Wert auto erzeugt automatisch eine vertikale Bildlaufleiste, wenn der Inhalt grösser als die div-Größe ist. Diese eine Eigenschaft löst den Fall, dass ein scrollbares div-Element erstellt wird.
In den folgenden Codezeilen wird eine Demo präsentiert.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
div{
background: powderblue;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflow = 'auto';
</script>
</body>
</html>
Ausgabe:
Verwenden Sie die Eigenschaften overflowX und overflowY, um ein div-Element in JavaScript zu scrollen
Wir setzen die Bildlaufleiste x-axis entsprechend diesen Eigenschaftssätzen auf none. Und damit wird der vertikale Scrollbalken mit dem Wert von overflowY auf auto gesetzt.
Folglich erscheint und funktioniert die Bildlaufleiste, wenn der Inhalt größer als das div wird. Der Codezaun gibt eine bessere Vorschau.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
background: lavender;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflowX='none';
document.getElementById('scroll').style.overflowY='auto';
</script>
</body>
</html>
Ausgabe:
