Comment faire défiler une barre latérale indépendamment à l'aide de la barre de défilement du navigateur ?

Comment faire défiler des contenus DIV spécifiques à l'aide de la barre de défilement du navigateur

Introduction

De nombreux sites Web, comme Gizmodo, ont une mise en page où une partie du contenu défile avec la barre de défilement principale du navigateur tandis que d'autres parties restent fixes. Bien que cela puisse paraître complexe, cela peut être réalisé entièrement via CSS.

Solution

Pour créer cet effet, nous devons considérer plusieurs aspects :

• Centrage horizontal : Assurez-vous que la mise en page globale est centrée horizontalement dans la fenêtre du navigateur.
• Défilement du contenu principal : Autorisez le défilement du contenu principal à gauche verticalement à l'aide de la barre de défilement principale.
• Barre latérale fixe : Gardez la barre latérale de droite fixe en haut de la fenêtre, sauf lorsque vous la survolez.
• Débordement de défilement : Activer le défilement de la barre latérale lorsque vous la survolez, lui permettant d'utiliser sa propre barre de défilement.

Implémentation

CSS :

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 */
}

Marquage :

<div class="wrapper">
    <div>

Explication :

• Wrapper : Fournit un conteneur de largeur fixe pour le contenu principal et la barre latérale.
• Contenu : Définit le contenu principal défilable.
• Superposition : Crée un élément fixe qui couvre toute la fenêtre du navigateur, garantissant que la barre latérale reste visible même pendant le défilement du contenu principal.
• Barre latérale : Positionne la barre latérale à droite et l'autorise pour faire défiler uniquement lorsque vous survolez.

Empêcher le défilement lors du survol de la barre latérale

Si vous le souhaitez, la barre latérale peut être empêchée de lancer le défilement lors du survol en modifiant le Structure HTML et CSS :

CSS :

#wrapper {
    min-width: unset;
    max-width: unset;
    height: 100%;
}

#content {
    margin-right: 0;
}

#sidebar {
    position: fixed;
    top: 0;
}

Marquage :

<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!