Comment créer deux barres de défilement horizontales (haut et bas) pour un tableau en utilisant HTML, CSS et JavaScript ?

Création d'une barre de défilement horizontale en haut et en bas d'un tableau

Dans les cas où un grand tableau s'étend au-delà de la fenêtre visible du navigateur, il est souvent souhaitable d'avoir des barres de défilement en haut et en bas pour parcourir efficacement l'ensemble du contenu du tableau.

En HTML et CSS purs, cela peut être réalisé en simulant une deuxième barre de défilement horizontale à le sommet. Voici comment :

1. Créer un div factice :

   Ajoutez un élément div au-dessus de la table et stylisez-le avec une hauteur suffisante pour créer l'apparence. d'une barre de défilement (par exemple, 20 px).

2. Désactiver Défilement vertical :

   Définissez overflow-y : caché pour le div factice et le div parent de la table afin de limiter le défilement à l'axe horizontal.

3. Activer le défilement horizontal :

   Définir overflow-x : faire défiler le div factice et le parent de la table div pour activer le défilement horizontal dans les deux zones.

4. Synchroniser les barres de défilement :

   Utilisez JavaScript pour synchroniser le défilement du div factice et du tableau en attacher des écouteurs d'événement à l'événement de défilement. Lorsqu'une barre de défilement est déplacée, l'autre s'ajuste en conséquence.

Voici un exemple qui place un div factice au-dessus du parent de la table. div :

HTML :

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">

CSS :

.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript :

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

En mettant en œuvre cette approche, vous pouvez créer l'illusion d'une seconde barre de défilement horizontale en haut de votre tableau, améliorant la navigation et l'accessibilité.

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!