Maison > Article > interface Web > Comment réaliser un défilement sélectif dans les mises en page Web à l'aide de la barre de défilement du navigateur ?
Utilisation de la barre de défilement du navigateur pour le défilement sélectif dans les mises en page Web
Votre demande cherche à imiter le comportement de défilement unique observé sur le site Web Gizmodo. À savoir, votre objectif est d'activer le défilement d'un élément div spécifique à l'aide de la barre de défilement principale du navigateur tout en gardant un autre div stationnaire.
Les pages de test fournies démontrent votre compréhension du centrage de la mise en page et de l'activation du défilement vertical. Cependant, combiner ces aspects s’est avéré difficile. Fournissons une solution complète qui répond aux deux exigences :
Solution CSS pure :
Malgré l'utilisation de scripts supplémentaires par Gizmodo, il est possible d'obtenir cet effet en utilisant du CSS pur. Notre solution vise à :
Démonstration de code :
Référez-vous au violon de démonstration suivant :
<pre class="brush:php;toolbar:false">html, body, * { padding: 0; margin: 0; } .wrapper { min-width: 500px; max-width: 700px; margin: 0 auto; } #content { margin-right: 260px; /* = sidebar width + some white space */ } #overlay { position: fixed; top: 0; width: 100%; height: 100%; } #overlay .wrapper { height: 100%; } #sidebar { width: 250px; float: right; max-height: 100%; } #sidebar:hover { overflow-y: auto; } #sidebar>* { max-width: 225px; /* leave some space for vertical scrollbar */ }
<pre class="brush:php;toolbar:false"><div>
Comprendre la solution :
Considérations supplémentaires :
En mettant en œuvre cette solution, vous pouvez créer des mises en page Web élégantes qui offrent des expériences de défilement améliorées aux utilisateurs.
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!