Comment rendre un DIV spécifique défilable à l'aide de la barre de défilement principale du navigateur ?

Faire défiler un DIV avec la barre de défilement principale du navigateur

Requête

Problème :

Vous rencontrez des difficultés pour aligner le contenu d'une page Web de manière centrale tout en rendant un DIV spécifique défilable à l'aide de la barre de défilement principale du navigateur.

Objectif :

Pour créer une mise en page centrée horizontalement avec une mise en page principale à gauche contenu défilable verticalement par la barre de défilement principale du navigateur et une barre latérale droite fixée en haut, devenant défilable uniquement lorsque la souris la survole.

Solution

Alors que l'exemple Gizmodo intègre des scripts pour gestion de la barre latérale, l'effet souhaité peut être obtenu avec du CSS pur. La solution consiste à :

1. Centrer horizontalement la mise en page tout en l'ajustant aux différentes tailles de fenêtre
2. Créer une section de contenu principale à défilement vertical à l'aide de la barre de défilement du navigateur
3. Réparer une barre latérale avec fonctionnalité de défilement distincte qui prend le relais si nécessaire

Mise en œuvre

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>

Personnalisation

Le contenu principal et la largeur de la barre latérale peuvent être configurés comme vous le souhaitez. Notez que la barre latérale n'est pas un enfant du conteneur de défilement du contenu principal pour empêcher la remontée de l'événement de défilement à partir de la barre latérale. Cela permet des comportements de défilement distincts.

Conclusion

Cette solution fournit une mise en page centralisée avec des capacités de défilement indépendantes pour le contenu principal et la barre latérale, en utilisant la barre de défilement principale du navigateur pour le contenu principal.

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!