Une deuxième barre de défilement horizontale peut-elle être créée en haut d'un tableau en utilisant uniquement HTML et CSS ?

Imiter une deuxième barre de défilement horizontale en haut d'une table

Problème :

Améliorer une table massive avec une barre de défilement horizontale la barre de défilement en bas est souhaitée. Cependant, la réplication de cette barre de défilement en haut est également recherchée. Est-il possible d'accomplir cela uniquement avec HTML et CSS ?

Solution :

L'utilisation d'un div "factice" simule une deuxième barre de défilement horizontale au-dessus d'un élément. Positionné directement au-dessus de l'élément principal, ce div factice est suffisamment dimensionné pour accueillir une barre de défilement. En attachant des gestionnaires d'événements aux éléments factices et principaux, la synchronisation est assurée lorsque l'une ou l'autre des barres de défilement est utilisée. Le div factice reproduit l'apparence et la fonctionnalité d'une deuxième barre de défilement supérieure.

Exemple en direct :

Explorez ce violon pour un aperçu pratique démonstration.

Code :

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());
  });
});

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!