JavaScript Scrollbares Div

Anika Tabassum Era 15 Februar 2024
  1. Verwendung der Eigenschaft overflow zum Scrollen eines div-Elements in JavaScript
  2. Verwenden Sie die Eigenschaften overflowX und overflowY, um ein div-Element in JavaScript zu scrollen
JavaScript Scrollbares Div

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 Overflow-Eigenschaft, um ein div-Element zu scrollen

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:

Verwenden Sie die Eigenschaften overflowX und overflowY, um ein div-Element zu scrollen

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Verwandter Artikel - JavaScript Scroll