Heim >Web-Frontend >CSS-Tutorial >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:
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:
Zusätzliche Überlegungen:
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!