Wie kann ich eine doppelte horizontale Bildlaufleiste oben in einer Tabelle erstellen?

Duplizierte horizontale Bildlaufleiste am oberen und unteren Rand einer Tabelle

Das Erstellen einer horizontalen Bildlaufleiste am unteren Rand einer Tabelle ist eine häufige Anforderung für Tabellen mit übermäßiger Breite. Die Replikation der Bildlaufleiste oben erfordert jedoch einen innovativeren Ansatz.

Um eine zweite horizontale Bildlaufleiste oben zu simulieren, besteht die Lösung darin, ein „Dummy“-Div über der Originaltabelle zu erstellen. Dieses Dummy-Div verfügt über eine horizontale Bildlaufleiste und ist genau so dimensioniert, dass sie die Breite der ursprünglichen Bildlaufleiste nachahmt.

Als nächstes werden Ereignishandler sowohl an das Dummy-Div als auch an die Originaltabelle angehängt, um ihr Scrollverhalten zu synchronisieren. Immer wenn eine der Bildlaufleisten verschoben wird, wird die andere aktualisiert, um die Ausrichtung beizubehalten. Der Effekt ist eine zweite horizontale Bildlaufleiste oben in der Tabelle.

Der folgende Code veranschaulicht diese Technik:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </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="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Durch die Integration dieser Technik können Entwickler mithilfe von reinem HTML, CSS und JavaScript effektiv eine doppelte horizontale Bildlaufleiste am oberen Rand einer Tabelle erstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine doppelte horizontale Bildlaufleiste oben in einer Tabelle erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!