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 à :

• Centrer la mise en page de manière réactive.
• Faites défiler verticalement le contenu de gauche à l'aide de la barre de défilement du navigateur.
• Gardez la barre latérale de droite fixe en haut de la fenêtre du navigateur et introduisez une barre de défilement uniquement en survol.
• Transférez de manière transparente le défilement vers la barre de défilement du navigateur lorsque vous atteignez la fin de la barre latérale.

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 :

• Le # wrapper div sert de conteneur parent pour l’ensemble de la mise en page. Il assure un centrage horizontal.
• #content contient le contenu principal et peut défiler verticalement.
• #overlay est un conteneur fixe qui permet le défilement de l'ensemble de la mise en page. Il est utilisé pour créer l'illusion de faire défiler le contenu au-delà de la fenêtre du navigateur.
• #sidebar est la barre latérale fixe de droite. Il défile indépendamment jusqu'à la fin, moment auquel le défilement passe à la barre de défilement du navigateur.

Considérations supplémentaires :

• Empêcher le défilement du menu principal Contenu survolé dans la barre latérale : créez un deuxième violon qui montre comment empêcher le défilement du contenu principal lorsque la souris est sur la barre latérale.
• Largeurs flexibles : envisagez d'implémenter une largeur flexible pour le contenu principal et la barre latérale en fonction de votre préférences.

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!