Kann eine zweite horizontale Bildlaufleiste oben in einer Tabelle nur mit HTML und CSS erstellt werden?

Nachahmung einer zweiten horizontalen Bildlaufleiste am oberen Rand einer Tabelle

Problem:

Verbesserung einer massiven Tabelle durch eine horizontale Eine Bildlaufleiste unten ist erwünscht. Allerdings wird auch eine Nachbildung dieser Bildlaufleiste oben angestrebt. Ist es machbar, dies rein mit HTML und CSS zu erreichen?

Lösung:

Die Verwendung eines „Dummy“-Div simuliert eine zweite horizontale Bildlaufleiste über einem Element. Dieses Dummy-Div befindet sich direkt über dem Primärelement und ist groß genug, um eine Bildlaufleiste aufzunehmen. Durch das Anhängen von Ereignishandlern sowohl an das Dummy- als auch an das Primärelement wird die Synchronisierung sichergestellt, wenn eine der Bildlaufleisten verwendet wird. Das Dummy-Div reproduziert das Erscheinungsbild und die Funktionalität einer zweiten oberen Bildlaufleiste.

Live-Beispiel:

Erkunden Sie diese Geige für ein praktisches Beispiel Demonstration.

Code:

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

Das obige ist der detaillierte Inhalt vonKann eine zweite horizontale Bildlaufleiste oben in einer Tabelle nur mit HTML und CSS erstellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!