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"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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="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!