Kann ich doppelte horizontale Bildlaufleisten (oben und unten) zu einer Tabelle hinzufügen, indem ich nur HTML und CSS verwende?

So fügen Sie eine horizontale Bildlaufleiste oben und unten in der Tabelle hinzu

In Szenarien, in denen eine Tabelle über die Grenzen des Bildschirms hinausgeht, wird sie angezeigt Es ist wichtig, eine horizontale Bildlaufleiste zu integrieren, um bequem durch den Inhalt navigieren zu können. Es besteht jedoch eine häufige Anforderung, wenn Benutzer diese Bildlaufleiste sowohl oben als auch unten in der Tabelle haben möchten, um einen nahtlosen Bildlauf zu ermöglichen. Ist dies allein durch HTML und CSS möglich?

Die Antwort ist ja. Um eine doppelte horizontale Bildlaufleiste zu simulieren, wird über dem eigentlichen Tabellenelement ein „Dummy“-Div platziert, dessen Höhe gerade ausreicht, um eine Bildlaufleiste aufzunehmen. Anschließend werden Ereignishandler sowohl an das Dummy-Div als auch an die Tabelle angehängt, um sicherzustellen, dass das Scrollen einer Bildlaufleiste das andere Element synchronisiert.

Eine praktische Demonstration finden Sie im Folgenden Beispiel:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </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());
  });
});

Diese Technik erzeugt effektiv die Illusion einer zweiten horizontalen Bildlaufleiste und sorgt so für eine bequeme und intuitive Bedienung Scrollerlebnis sowohl oben als auch unten in der Tabelle.

Das obige ist der detaillierte Inhalt vonKann ich doppelte horizontale Bildlaufleisten (oben und unten) zu einer Tabelle hinzufügen, indem ich nur HTML und CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!