Comment puis-je créer deux barres de défilement horizontales pour les grands tableaux en utilisant uniquement HTML, CSS et JavaScript ?

Deux barres de défilement horizontales pour les tables Mammoth

Pour accueillir de vastes tables, l'activation du défilement horizontal en haut et en bas peut améliorer l'accessibilité des utilisateurs. Heureusement, cela n'est réalisable qu'avec HTML et CSS. Voici comment procéder :

Simuler une barre de défilement supérieure

Créer un div "factice" au-dessus du tableau avec défilement horizontal. Réglez sa hauteur juste assez pour accueillir une barre de défilement. Cet élément factice simulera l'apparence d'une barre de défilement supplémentaire en haut.

Synchronisation des événements de défilement

Attachez des gestionnaires d'événements de défilement à la fois au div factice et à la table réelle. Lorsque l'une des barres de défilement est déplacée, l'autre élément doit se déplacer de manière synchronisée. Cela crée l'illusion d'avoir deux barres de défilement horizontales indépendantes.

Extrait de code

HTML :

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

JS :

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

Avec ce code, vous pouvez fournir à vos utilisateurs avec deux barres de défilement horizontales, facilitant la navigation dans les tableaux larges, même sur des pages étendues.

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!