Heim > Web-Frontend > CSS-Tutorial > Wie mache ich ein bestimmtes DIV mithilfe der Hauptbildlaufleiste des Browsers scrollbar?

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

DDD
Freigeben: 2024-11-07 05:00:03
Original
287 Leute haben es durchsucht

How to Make a Specific DIV Scrollable Using the Browser's Main 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 */
}
Nach dem Login kopieren

Markup:

<div class="wrapper">
    <div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage