Puis-je avoir des barres de défilement horizontales en haut et en bas d’un tableau en utilisant HTML et CSS ?

Barres de défilement horizontales en haut et en bas

Question :

Est-il possible d'avoir des barres de défilement horizontales en haut et en bas d'un grand tableau en utilisant uniquement HTML et CSS ?

Réponse :

Oui, vous pouvez simuler une deuxième barre de défilement horizontale en haut d'un élément.

Implémentation :

Créez un div "factice" au-dessus du tableau avec un défilement horizontal. Ce div doit être juste assez grand pour une barre de défilement.

Attachez des gestionnaires d'événements à l'événement de défilement du div factice et de la table réelle. Cela synchronisera le défilement des deux barres de défilement lorsque l'une ou l'autre est déplacée.

Exemple de code :

HTML :

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content here -->
  </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="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Exemple en direct :

Voir l'[exemple en direct](lien de violon ici) pour illustrer l'effet.

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!