Maison > Article > interface Web > 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!