Maison  >  Article  >  interface Web  >  Comment désactiver le défilement horizontal tout en conservant le défilement vertical ?

Comment désactiver le défilement horizontal tout en conservant le défilement vertical ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-01 12:06:02980parcourir

How to Disable Horizontal Scrolling While Maintaining Vertical Scrolling?

Désactiver le défilement horizontal : obtenir une expérience utilisateur fluide

Un défilement horizontal excessif peut nuire à l'attrait visuel et à l'expérience utilisateur d'une page Web. Pour surmonter ce problème, il faut désactiver la fonctionnalité de défilement horizontal tout en conservant les capacités de défilement vertical.

Pour y parvenir efficacement, considérez le code CSS suivant :

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Cet extrait résout la situation en appliquant un maximum largeur de 100 % sur les éléments html et body. De plus, il désactive explicitement le défilement horizontal à l'aide de la propriété "overflow-x: Hidden". Cette approche empêche la page de s'étendre horizontalement, garantissant une expérience utilisateur fluide avec uniquement un défilement vertical.

En mettant en œuvre ces ajustements, les zones vides disgracieuses et le défilement horizontal indésirable sont éliminés, ce qui donne lieu à un affichage plus raffiné et plus convivial. page Web.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn