Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-10-30 20:48:30
Original
238 Leute haben es durchsucht

Can I Have Horizontal Scrollbars at Both the Top and Bottom of a Table Using HTML and CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

JavaScript:

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

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!