Wie implementiert man zwei horizontale Bildlaufleisten für große Tabellen?

Zwei horizontale Bildlaufleisten für große Tabellen

Problem:

Der Benutzer stößt auf eine große Tabelle auf der Seite Implementieren Sie horizontale Bildlaufleisten oben und unten, um die Navigation zu erleichtern.

Implementierung mit HTML und CSS:

Um die gewünschte Funktionalität zu erreichen, wird ein kreativer Ansatz verwendet. Über der Tabelle wird ein „Dummy“-Div positioniert, das ausreichend hoch ist, um eine Bildlaufleiste aufzunehmen. Sowohl dem Dummy-Div als auch der Tabelle sind horizontale Bildlauffunktionen zugewiesen.

Code-Aufschlüsselung:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </div>
</div></code>

CSS:

<code class="css">.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.wrapper1 { height: 20px; }
.wrapper2 { height: 200px; }

.div1 {
  width: 1000px;
  height: 20px;
}

.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}</code>

JavaScript:

<code class="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Funktion:

• Das Dummy-Div (.div1) simuliert eine obere Bildlaufleiste und fungiert als unsichtbarer Platzhalter.
• Die eigentliche Tabelle (.div2) enthält den Tabelleninhalt und hat horizontales Scrollen aktiviert.
• JavaScript Ereignishandler stellen sicher, dass sich die andere Bildlaufleiste synchron bewegt, wenn eine der Bildlaufleisten bewegt wird.

Live-Beispiel:

Eine Live-Demonstration finden Sie im bereitgestellten Geige.

Das obige ist der detaillierte Inhalt vonWie implementiert man zwei horizontale Bildlaufleisten für große Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!