Wie erstelle ich in HTML und CSS horizontale Bildlaufleisten oben und unten in einer Tabelle?

So platzieren Sie horizontale Bildlaufleisten oben und unten in einer Tabelle in HTML und CSS

Um den Bedarf an einer horizontalen Bildlaufleiste zu decken Sowohl am oberen als auch am unteren Rand einer großen Tabelle ist es nicht direkt möglich, nur HTML und CSS zu verwenden. Es gibt jedoch eine effektive Lösung, um das Vorhandensein von zwei Bildlaufleisten zu simulieren.

Der Trick besteht darin, ein „Dummy“-Div über der Tabelle zu positionieren und ihm eine Höhe zu verleihen, die gerade ausreicht, um eine horizontale Bildlaufleiste aufzunehmen. Dieses Dummy-Div dient als „zweite“ Bildlaufleiste.

Um die Synchronisierung zwischen dem Dummy-Div und der tatsächlichen Tabelle aufrechtzuerhalten, werden Ereignishandler an beide Elemente angehängt. Immer wenn die Bildlaufleiste eines Elements verschoben wird, wird das andere Element entsprechend aktualisiert, um sicherzustellen, dass beide Bildlaufleisten synchron bleiben.

Eine interaktive Demonstration finden Sie in der bereitgestellten Geige:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

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

<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Durch den Einsatz dieser Technik können Sie das Vorhandensein horizontaler Bildlaufleisten oben und unten in Ihrer Tabelle effektiv nachahmen und so Ihren Benutzern eine bequeme Navigation ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in HTML und CSS horizontale Bildlaufleisten oben und unten in einer Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!