Wie kann ich zwei horizontale Bildlaufleisten für große Tabellen erstellen, indem ich nur HTML, CSS und JavaScript verwende?

Zwei horizontale Bildlaufleisten für Mammuttabellen

Um große Tabellen unterzubringen, kann die Aktivierung des horizontalen Bildlaufs sowohl oben als auch unten die Zugänglichkeit für den Benutzer verbessern. Glücklicherweise ist dies nur mit HTML und CSS möglich. So geht's:

Simulieren einer oberen Bildlaufleiste

Erstellen Sie ein „Dummy“-Div über der Tabelle mit horizontalem Scrollen. Stellen Sie die Höhe gerade so ein, dass eine Bildlaufleiste Platz findet. Dieses Dummy-Element simuliert das Erscheinungsbild einer zusätzlichen Bildlaufleiste oben.

Scroll-Ereignisse synchronisieren

Fügen Sie Scroll-Ereignishandler sowohl dem Dummy-Div als auch der tatsächlichen Tabelle hinzu. Wenn eine der Bildlaufleisten bewegt wird, sollte sich das andere Element synchron bewegen. Dadurch entsteht die Illusion, zwei unabhängige horizontale Bildlaufleisten zu haben.

Code-Snippet

HTML:

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

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; }

JS:

$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Mit diesem Code können Sie Ihren Benutzern Dual-Horizontal zur Verfügung stellen Bildlaufleisten, die das Navigieren in breiten Tabellen auch auf erweiterten Seiten erleichtern.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei horizontale Bildlaufleisten für große Tabellen erstellen, indem ich nur HTML, CSS und JavaScript verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!