Comment réaliser un défilement sélectif avec une barre latérale fixe en utilisant Pure CSS ?

Utilisation de la barre de défilement principale du navigateur pour le défilement sélectif

Dans la conception Web, il peut arriver que vous souhaitiez activer le défilement de sections spécifiques de votre page tout en conservant d'autres zones. fixé. Cette technique est particulièrement utile pour créer des mises en page uniques telles que celles vues sur des sites Web populaires comme GIZMODO.

Problème : Pour obtenir une mise en page visuellement attrayante et fonctionnelle comme GIZMODO, les développeurs sont confrontés à des défis pour aligner les pages. éléments, permettant des comportements de défilement spécifiques et empêchant le défilement involontaire dans certaines sections de la page.

Solution : En utilisant du CSS pur, il est possible d'obtenir la mise en page souhaitée en suivant ces étapes :

1. Centrage horizontal : Pour aligner le contenu de la page horizontalement, spécifiez une largeur minimale et maximale pour le conteneur principal et centrez-le à l'aide de la propriété margin : 0 auto.
2. Défilement du contenu principal : Désignez la zone de contenu principale en lui attribuant un identifiant tel que "#content" et assurez-vous qu'elle occupe l'espace approprié avec la propriété margin-right.
3. Contenu de la barre latérale : Créez une barre latérale avec un identifiant comme "#sidebar" et définissez sa largeur en la positionnant à droite. Utilisez max-height pour limiter sa hauteur et float: right pour un alignement correct.
4. Défilement en survol : Pour activer le défilement de la barre latérale lorsque la souris la survole, utilisez #sidebar:hover { overflow-y: auto;}.
5. Isolement des événements de défilement : Si vous le souhaitez, empêchez la barre latérale de déclencher le défilement du contenu principal en séparant la barre latérale du conteneur de défilement du contenu principal.

Démonstration : Visualisez cette solution en action dans le violon de démonstration fourni, où le contenu de gauche défile avec la barre de défilement du navigateur, tandis que la barre latérale de droite reste fixe.

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!