Wie erstelle ich synchronisierte horizontale Bildlaufleisten oben und unten für eine Tabelle nur mit HTML und CSS?

So erstellen Sie eine horizontale Bildlaufleiste oben und unten in einer Tabelle nur mit HTML und CSS

Problem:

Ein Benutzer möchte oben und unten in einer großen Tabelle horizontale Bildlaufleisten hinzufügen, ohne welche zu verwenden JavaScript.

Lösung:

Es ist möglich, eine zweite horizontale Bildlaufleiste oben in der Tabelle zu simulieren, indem Sie mithilfe von CSS ein „Dummy“-Div über der Tabelle erstellen verfügt über horizontales Scrollen und eine Höhe, die gerade hoch genug für eine Bildlaufleiste ist. Event-Handler für das „Scroll“-Ereignis können dann an das Dummy-Element und die eigentliche Tabelle angehängt werden, wodurch das Scrollen beider Elemente synchronisiert wird, wenn eine der Bildlaufleisten bewegt wird.

Code Snippet:

HTML:

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

JavaScript:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Das Dummy-Div (.div1) wird als zweite horizontale Bildlaufleiste über dem eigentlichen Tabellenelement (.div2) angezeigt. Durch die Synchronisierung des Bildlaufs beider Elemente kann der Benutzer den Tabelleninhalt entweder von der oberen oder unteren Bildlaufleiste aus scrollen.

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