Wie erreicht man selektives Scrollen in Weblayouts mithilfe der Browser-Bildlaufleiste?

Verwenden der Browser-Bildlaufleiste für selektives Scrollen in Weblayouts

Ihre Anfrage zielt darauf ab, das einzigartige Scrollverhalten zu emulieren, das auf der Gizmodo-Website beobachtet wird. Ihr Ziel ist es nämlich, das Scrollen eines bestimmten Div-Elements mithilfe der Hauptbildlaufleiste des Browsers zu ermöglichen, während ein anderes Div stationär bleibt.

Ihre bereitgestellten Testseiten zeigen Ihr Verständnis für die Zentrierung des Layouts und die Ermöglichung vertikalen Scrollens. Die Kombination dieser Aspekte hat sich jedoch als Herausforderung erwiesen. Lassen Sie uns eine umfassende Lösung bereitstellen, die beide Anforderungen erfüllt:

Reine CSS-Lösung:

Trotz der Verwendung zusätzlicher Skripte durch Gizmodo ist es möglich, diesen Effekt mit reinem CSS zu erzielen. Unsere Lösung zielt darauf ab:

• Das Layout reaktionsschnell zu zentrieren.
• Mit der Bildlaufleiste des Browsers vertikal durch den linken Inhalt scrollen.
• Die rechte Seitenleiste fixiert lassen am oberen Rand des Browserfensters und führen Sie eine Bildlaufleiste nur bei Hover ein.
• Übertragen Sie das Scrollen nahtlos auf die Bildlaufleiste des Browsers, wenn Sie das Ende der Seitenleiste erreichen.

Code-Demonstration :

Beziehen Sie sich auf die folgende Demonstrationsgeige:

<pre class="brush:php;toolbar:false">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 */
}

<pre class="brush:php;toolbar:false"><div>

Die Lösung verstehen:

• Die # Wrapper-Div dient als übergeordneter Container für das gesamte Layout. Es gewährleistet die horizontale Zentrierung.
• #content enthält den Hauptinhalt und ist vertikal scrollbar.
• #overlay ist ein fester Container, der das Scrollen des gesamten Layouts ermöglicht. Es wird verwendet, um die Illusion zu erzeugen, dass Inhalte über das Browserfenster hinaus gescrollt werden.
• #sidebar ist die rechte feste Seitenleiste. Es wird unabhängig gescrollt, bis das Ende erreicht ist. An diesem Punkt wechselt der Bildlauf zur Bildlaufleiste des Browsers.

Zusätzliche Überlegungen:

• Scrollen im Hauptmenü verhindern Inhalt auf der Seitenleiste bewegen: Erstellen Sie eine zweite Geige, die zeigt, wie Sie das Scrollen des Hauptinhalts verhindern können, wenn sich die Maus über der Seitenleiste befindet.
• Flexible Breiten: Erwägen Sie die Implementierung einer flexiblen Breite sowohl für den Hauptinhalt als auch für die Seitenleiste basierend auf Ihren Anforderungen Präferenzen.

Durch die Implementierung dieser Lösung können Sie elegante Weblayouts erstellen, die Benutzern ein verbessertes Scrollerlebnis bieten.

Das obige ist der detaillierte Inhalt vonWie erreicht man selektives Scrollen in Weblayouts mithilfe der Browser-Bildlaufleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!