Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich eine doppelte horizontale Bildlaufleiste oben in einer Tabelle erstellen?

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

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 03:02:31157Durchsuche

How Can I Create a Duplicate Horizontal Scrollbar at the Top of a Table?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn