Comment contrôler les barres de défilement horizontales dans les éléments CSS « div » ?

Contrôle des barres de défilement horizontales dans un élément CSS 'div'

Lorsque vous travaillez avec des conteneurs 'div' en CSS, vous pouvez rencontrer une situation dans laquelle vous désirez uniquement des barres de défilement horizontales. Cet article explique comment obtenir ce comportement.

Dans l'extrait de code fourni, vous avez configuré la propriété « overflow » sur « auto », qui permet le défilement horizontal et vertical lorsque le contenu dépasse la largeur ou la hauteur spécifiée. . Pour limiter le défilement au plan horizontal, modifiez la propriété « overflow-y » comme suit :

div#tbl-container {
    overflow: hidden;
    overflow-y: auto;
    scrollbar-base-color: #ffeaff;
}

En définissant « overflow-y » sur « auto », vous autorisez le défilement vertical automatique si la hauteur du contenu dépasse la hauteur 'div', tandis que 'overflow' étant défini sur 'hidden' empêche le défilement horizontal à moins que la largeur du contenu ne dépasse la 'div' spécifiée largeur.

Dans les versions 6 et 7 d'Internet Explorer (IE), une extension CSS3 supplémentaire est requise pour supprimer la barre de défilement verticale :

div#tbl-container {
    overflow: auto;
    overflow-y: hidden;
    scrollbar-base-color: #ffeaff;
    -ms-overflow-y: hidden;
}

Ce préfixe '-ms' est utilisé pour s'adapter IE8 en raison de la désignation par Microsoft des propriétés standard de recommandation pré-candidat sous son propre espace de noms.

Il est à noter qu'IE8 a peut-être résolu ce problème bug, éliminant le besoin du préfixe '-ms'. Néanmoins, les modifications CSS mentionnées ci-dessus devraient fournir le résultat souhaité en contrôlant les barres de défilement pour les éléments « div ».

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!