Comment créer des barres de défilement horizontales supérieure et inférieure synchronisées pour un tableau en utilisant uniquement HTML et CSS ?

Comment créer une barre de défilement horizontale en haut et en bas d'un tableau avec uniquement du HTML et du CSS

Problème :

Un utilisateur souhaite ajouter des barres de défilement horizontales en haut et en bas d'un grand tableau sans en utiliser JavaScript.

Solution :

Il est possible de simuler une deuxième barre de défilement horizontale en haut du tableau en utilisant CSS pour créer un div "factice" au-dessus du tableau qui a un défilement horizontal et une hauteur juste assez élevée pour une barre de défilement. Les gestionnaires d'événements pour l'événement "scroll" peuvent ensuite être attachés à l'élément factice et à la table réelle, synchronisant le défilement des deux éléments lorsque l'une ou l'autre des barres de défilement est déplacée.

Code Extrait :

HTML :

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

JavaScript :

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

Le div factice (.div1) apparaîtra comme une deuxième barre de défilement horizontale au-dessus de l'élément de tableau réel (.div2). En synchronisant le défilement des deux éléments, l'utilisateur peut faire défiler le contenu du tableau depuis la barre de défilement supérieure ou inférieure.

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!