Puis-je ajouter des barres de défilement horizontales en double (haut et bas) à un tableau en utilisant uniquement HTML et CSS ?

Comment ajouter une barre de défilement horizontale en haut et en bas du tableau

Dans les scénarios où un tableau s'étend au-delà des limites de l'écran, il devient essentiel d'incorporer une barre de défilement horizontale pour naviguer facilement dans son contenu. Cependant, une exigence courante apparaît lorsque les utilisateurs préfèrent avoir cette barre de défilement en haut et en bas du tableau pour un défilement fluide. Est-il possible d'y parvenir uniquement via HTML et CSS ?

La réponse est oui. Pour simuler une double barre de défilement horizontale, un div « factice » est placé au-dessus de l'élément de table réel, avec une hauteur juste suffisante pour accueillir une barre de défilement. Les gestionnaires d'événements sont ensuite attachés à la fois au div factice et à la table, garantissant que le défilement de l'une ou l'autre barre de défilement synchronise l'autre élément.

Pour une démonstration pratique, reportez-vous à ce qui suit exemple :

HTML :

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

Cette technique crée efficacement l'illusion d'une deuxième barre de défilement horizontale, offrant un et une expérience de défilement intuitive en haut et en bas du tableau.

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!