Wie mache ich ein bestimmtes DIV mithilfe der Hauptbildlaufleiste des Browsers scrollbar?

Scrollen eines DIV mit der Hauptbildlaufleiste des Browsers

Abfrage

Problem:

Sie haben Probleme um den Inhalt einer Webseite zentral auszurichten und gleichzeitig ein bestimmtes DIV mithilfe des Hauptmenüs des Browsers scrollbar zu machen Bildlaufleiste.

Ziel:

Erstellen eines horizontal zentrierten Layouts mit einem Hauptinhalt auf der linken Seite, der durch die Hauptbildlaufleiste des Browsers vertikal scrollbar ist, und einer festen Seitenleiste auf der rechten Seite oben und kann nur gescrollt werden, wenn die Maus darüber fährt.

Lösung

Während die Da Gizmodo beispielsweise Skripte für die Handhabung der Seitenleiste enthält, kann der gewünschte Effekt mit reinem CSS erzielt werden. Die Lösung umfasst:

1. Horizontales Zentrieren des Layouts bei gleichzeitiger Anpassung an unterschiedliche Fenstergrößen
2. Erstellen eines vertikal scrollbaren Hauptinhaltsbereichs mithilfe der Bildlaufleiste des Browsers
3. Fixieren einer Seitenleiste mit separate Scrollfunktion, die wann übernimmt notwendig

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>

Anpassung

Sowohl der Hauptinhalt als auch die Breite der Seitenleiste können nach Wunsch konfiguriert werden. Beachten Sie, dass die Seitenleiste kein untergeordnetes Element des Scroll-Containers des Hauptinhalts ist, um ein Aufsprudeln des Scroll-Ereignisses aus der Seitenleiste zu verhindern. Dies ermöglicht separate Scrollverhalten.

Fazit

Diese Lösung bietet ein zentralisiertes Layout mit unabhängigen Scrollfunktionen für Hauptinhalt und Seitenleiste, wobei die Hauptscrollleiste des Browsers für den Hauptinhalt verwendet wird.

Das obige ist der detaillierte Inhalt vonWie mache ich ein bestimmtes DIV mithilfe der Hauptbildlaufleiste des Browsers scrollbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!