Kann ich mit HTML und CSS horizontale Bildlaufleisten sowohl am oberen als auch am unteren Rand einer Tabelle haben?

Horizontale Bildlaufleisten oben und unten

Frage:

Ist das möglich? horizontale Bildlaufleisten sowohl oben als auch unten in einer großen Tabelle nur mit HTML und CSS?

Antwort:

Ja, Sie können oben eine zweite horizontale Bildlaufleiste simulieren eines Elements.

Implementierung:

Erstellen Sie ein „Dummy“-Div über der Tabelle mit horizontalem Scrollen. Dieses Div sollte gerade groß genug für eine Bildlaufleiste sein.

Fügen Sie Ereignishandler an das Bildlaufereignis sowohl des Dummy-Div als auch der tatsächlichen Tabelle an. Dadurch wird das Scrollen beider Bildlaufleisten synchronisiert, wenn eine davon verschoben wird.

Codebeispiel:

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>

Live-Beispiel:

Sehen Sie sich das [Live-Beispiel] (Fiddle-Link hier) an, um den Effekt zu veranschaulichen.

Das obige ist der detaillierte Inhalt vonKann ich mit HTML und CSS horizontale Bildlaufleisten sowohl am oberen als auch am unteren Rand einer Tabelle haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!