Wie kann ich mithilfe der Bildlaufleiste des Browsers unabhängig voneinander in der Seitenleiste scrollen?

So scrollen Sie durch bestimmte DIV-Inhalte mithilfe der Bildlaufleiste des Browsers

Einführung

Viele Websites, haben wie Gizmodo ein Layout, bei dem ein Teil des Inhalts mit der Hauptbildlaufleiste des Browsers scrollt, während andere Teile fest bleiben. Obwohl dies komplex erscheinen mag, kann es vollständig durch CSS erreicht werden.

Lösung

Um diesen Effekt zu erzielen, müssen wir mehrere Aspekte berücksichtigen:

• Horizontale Zentrierung: Stellen Sie sicher, dass das Gesamtlayout im Browserfenster horizontal zentriert ist.
• Hauptinhalt scrollen: Ermöglichen Sie das Scrollen des Hauptinhalts auf der linken Seite vertikal mit der Haupt-Bildlaufleiste.
• Feste Seitenleiste: Die rechte Seitenleiste bleibt oben im Fenster fixiert, außer wenn Sie mit der Maus darüber fahren.
• Scroll-Überlauf: Aktivieren Sie das Scrollen für die Seitenleiste, wenn Sie mit der Maus darüber fahren, sodass diese ihre eigene Scrollleiste verwenden kann.

Implementierung

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

Markup:

<div class="wrapper">
    <div>

Erklärung:

• Wrapper : Stellt einen Container mit fester Breite sowohl für den Hauptinhalt als auch für die Seitenleiste bereit.
• Inhalt: Definiert den scrollbaren Hauptinhalt.
• Overlay: Erstellt ein festes Element, das den gesamten Browser-Ansichtsbereich abdeckt und sicherstellt, dass die Seitenleiste auch dann sichtbar bleibt, wenn der Hauptinhalt gescrollt wird.
• Seitenleiste: Positioniert die Seitenleiste rechts und lässt sie zu um nur zu scrollen, wenn Sie mit der Maus darüber fahren.

Scrollen beim Bewegen der Maus über die Seitenleiste verhindern

Auf Wunsch kann verhindert werden, dass die Seitenleiste beim Bewegen der Maus darüber scrollt, indem Sie die ändern HTML-Struktur und CSS:

CSS:

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

#content {
    margin-right: 0;
}

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

Markup:

<div>

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe der Bildlaufleiste des Browsers unabhängig voneinander in der Seitenleiste scrollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!