Comment implémenter deux barres de défilement horizontales pour les grandes tables ?

Deux barres de défilement horizontales pour les grands tableaux

Problème :

Rencontreant un grand tableau sur la page, l'utilisateur cherche à implémentez des barres de défilement horizontales supérieure et inférieure pour faciliter la navigation.

Implémentation en utilisant HTML et CSS :

Pour obtenir la fonctionnalité souhaitée, une approche créative est utilisée. Un div « factice » est positionné au-dessus de la table, rendu suffisamment haut pour accueillir une barre de défilement. Le div factice et le tableau se voient attribuer des capacités de défilement horizontal.

Répartition du code :

HTML :

<code class="html">&lt;div class=&quot;wrapper1&quot;&gt;
  &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;wrapper2&quot;&gt;
  &lt;div class=&quot;div2&quot;&gt;
    &lt;!-- Table Content --&gt;
  &lt;/div&gt;
&lt;/div&gt;</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="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Fonction :

• Le div factice (.div1) simule une barre de défilement supérieure et agit comme un espace réservé invisible.
• Le tableau réel (.div2) contient le contenu du tableau et le défilement horizontal est activé.
• JavaScript Les gestionnaires d'événements garantissent que lorsque l'une des barres de défilement est déplacée, l'autre barre de défilement se déplace de manière synchronisée.

Exemple en direct :

Pour une démonstration en direct, reportez-vous au document fourni. violon.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!