Eine Bildlaufleiste (Bildlaufleiste) ist ein einfacher, aber effektiver Mechanismus, der als primäres Mittel zum Anzeigen großer Dokumente dient. Aber das ist noch nicht alles, wozu Bildlaufleisten fähig sind! Diese bescheidenen Arbeitspferde können den Benutzern auch ziemlich gut sagen, wie groß die Dokumente sind, mit denen sie interagieren. Infolgedessen tragen Bildlaufleisten eine doppelte Last. Sie helfen bei der Arbeit mit verschiedenen Materialien und informieren den Benutzer über die Größe dieser Materialien.
Die einfache und verständliche Logik von Bildlaufleisten kann während der Implementierung von Bildlaufmechanismen geändert werden. Dies geschieht, wenn sich das Standardverhalten der Bildlaufleiste ändert, wodurch die vom Benutzer erwartete Korrespondenz zwischen der Länge des Dokuments und der Höhe der Bildlaufleiste verletzt wird.
Darüber hinaus haben Programme für Geräte mit Touchscreens die Idee verbreitet, Bildlaufleisten auszublenden. Bei diesem Ansatz sind Bildlaufleisten unsichtbar, bis der Benutzer mit dem Scrollen eines Elements beginnt, das nicht in einen bestimmten Anzeigebereich passt. Infolgedessen stellt sich heraus, dass Designer aus Gründen der visuellen Attraktivität von Anwendungen die Klarheit von Schnittstellen opfern. Der Benutzer benötigt möglicherweise einige Zeit, um zu verstehen, dass der Inhalt eines bestimmten Containers gescrollt werden kann. Ein solcher Container sieht möglicherweise so aus, als würde er das Scrollen nicht unterstützen oder als müsste er einfach nicht gescrollt werden.
Klassische Desktop-Betriebssysteme haben diesen mobilen Trend aufgegriffen und versucht, die Interferenz herkömmlicher Bildlaufleisten beim Anwendungsdesign zu minimieren.
Das Material, dessen Übersetzung wir heute veröffentlichen, widmet sich einigen Funktionen der Verwendung von Bildlaufleisten in Webanwendungen.
Einige Begriffe
Bevor wir fortfahren, definieren wir einige Begriffe, die wir hier verwenden werden. Wir unterscheiden nämlich zwei Arten von Bildlaufleisten:
- Behobene (aufdringliche) Bildlaufleisten - diejenigen, die den Bildschirmbereich belegen. Sie überlappen den angezeigten Inhalt nicht, sondern sitzen neben ihnen.
- Nicht feste (unauffällige) Bildlaufleisten - solche, die den Inhalt überlappen. Sie nehmen den Bildschirmbereich nicht von den Containern weg, zu denen sie gehören.
Standardverhalten moderner Bildlaufleisten
Standardmäßig sind sowohl iOS- als auch Android-Bildlaufleisten nicht fixiert.
In macOS (insbesondere sprechen wir zum Zeitpunkt des Schreibens dieses Materials über relevantes macOS Mojave) werden Bildlaufleisten ausgeblendet, bis das Element mit dem Bildlauf beginnt. Dies ist das Standardverhalten des Systems in einer Situation, in der keine Maus an den Computer angeschlossen ist. Es gibt drei Optionen zum Anzeigen von Bildlaufleisten (die entsprechenden Einstellungen finden Sie unter
General > System Preferences ).
Bildlaufleisteneinstellungen in macOS MojaveEs wurde festgestellt, dass diese Einstellungen das Verhalten von Bildlaufleisten in Chrome, Firefox und im neuen Edge auf Chromium-Basis steuern.
In diesem Video können Sie sehen, wie sich die oben genannten Einstellungen auf Bildlaufleisten auswirken und wie sich Bildlaufleisten zusätzlich zum Scrollen von Inhalten auf diese auswirken. Hier sind einige Auszüge aus diesem Video.
Die feste Bildlaufleiste in macOS ist immer sichtbar und nimmt etwas Platz auf dem Bildschirm einDie nicht festgelegte Bildlaufleiste von MacOS überlagert den Inhalt, während Sie durch ein Dokument scrollenDie nicht korrigierte Bildlaufleiste in macOS wird in dem Moment ausgeblendet, in dem das Dokument nicht gescrollt wirdIn Windows 10 finden Sie unter
Settings > Display > Simplify and personalize Windows ähnliche Einstellungen.
Bildlaufleisteneinstellungen in Windows 10Selbst wenn die
Automatically hide scroll bars in Windows , hat dies leider keine Auswirkungen auf Firefox, Chrome, Internet Explorer und Edge. Bei Edge handelt es sich sowohl um die auf Chromium basierende Browservariante als auch um die auf EdgeHTML basierende Variante.
Aufgabenübersicht
So sieht die Seite aus, die wir oben unter macOS überprüft haben, unter Windows.
Windows-Bildlaufleisten-SeiteWindows-Bildlaufleisten sind standardmäßig festgelegt. Außerdem sehen sie in Bezug auf das Design ziemlich „schwer“ aus. Sie sind in ihrer Standardversion viel breiter als ihre Gegenstücke von macOS. Darüber hinaus entspricht die Farbe der Bildlaufleisten in Windows normalerweise den Systemeinstellungen und nicht der Farbpalette einer Webseite.
Designer, die an die macOS-Umgebung gewöhnt sind, aber Webanwendungen entwickeln, die für verschiedene Plattformen entwickelt wurden, haben möglicherweise Schwierigkeiten, ihre Projekte auf verschiedenen Betriebssystemen gut aussehen zu lassen, und geben nicht zu viel Systemressourcen für das Rendern aus.
Projektanforderungen
Wir möchten eine Webanwendung entwickeln, deren verwendete Bildlaufleisten sich in folgenden Funktionen unterscheiden:
- Sie sollten attraktiv aussehen, wenn Sie Seiten auf einem Desktop-Betriebssystem anzeigen. Dies ist besonders wichtig, wenn Container angezeigt werden, deren Inhalt nicht vollständig in sie passt. In solchen Containern werden Bildlaufleisten angezeigt. Dies bedeutet, dass das Design dieser Bildlaufleisten gut mit dem Design der Container übereinstimmen muss. Wir glauben, dass dies bei Bildlaufleisten, mit denen Sie die gesamte Seite scrollen können, nicht so wichtig ist, aber dies ist zweifellos ein kontroverses Thema.
- Wir möchten den Bildschirmbereich minimieren, den eine Bildlaufleiste einnehmen kann. In Windows sind Bildlaufleisten standardmäßig fest und sehr breit.
- Wir wollen uns auf die Systemeinstellungen konzentrieren. Wenn der Benutzer in den Einstellungen eine nicht standardmäßige Option auswählt, die das Verhalten von Bildlaufleisten definiert, müssen wir dies nach Möglichkeit berücksichtigen.
- Wir bemühen uns, die Verwendung schwerer JavaScript-Lösungen (wie das sehr schöne OverlayScrollbars- Plugin) zu vermeiden, die für die Verwendung mit nicht fixierten Bildlaufleisten entwickelt wurden. Sie belasten Client-Computer erheblich.
Wie weit kann ich mit CSS gehen?
Hier ist der Code für das Containerelement, dem die Klasse für
overflowing-element zugewiesen ist, sowie der CSS-Code für die
overflowing-element :
<div class="overflowing-element"></div> .overflowing-element { overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }
Wenn Sie in Internet Explorer und in Edge basierend auf EdgeHTML nicht fixierte Bildlaufleisten benötigen, ist die
-ms-overflow-style: -ms-autohiding-scrollbar; . Mit seiner Verwendung wird alles so funktionieren, wie es sollte (es ist einfach genug - richtig?).
Als iOS 13 herauskam, stellte sich heraus, dass die
Eigenschaft -webkit-overflow-scrolling: touch möglicherweise nicht erforderlich ist, um die Physik des Bildlaufs zu verbessern. Wenn Sie ältere Versionen von iOS unterstützen müssen, ist es jedoch besser, die Verwendung dieser Eigenschaft nicht zu verweigern.
Wenn wir über CSS-Eigenschaften im Zusammenhang mit dem Scrollen sprechen, kann es hilfreich sein, die Eigenschaft "
Overscroll-Verhalten" zu lesen. Sie können das Verhalten des Systems steuern, wenn Sie den Rand des Elements erreichen, das das Scrollen unterstützt.
▍Firefox
Der Firefox-Browser unterstützt CSS-Eigenschaften ohne Präfixe. Dies ist die
Farbe der Bildlaufleiste und die Breite der Bildlaufleiste .
Im folgenden Beispiel werden aus Gründen der Übersichtlichkeit CSS-Variablen verwendet, die in Internet Explorer 11 nicht unterstützt werden:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-width: thin; } .overflowing-element { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); }
▍Chrome und Safari, Chromium-basierter Edge-Browser und andere Browser
Webkit- und Blink-basierte Browser unterstützen benutzerdefinierte
Pseudoelemente zum Anpassen von Bildlaufleisten:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-size: .375rem; --scrollbar-minlength: 1.5rem; } .overflowing-element::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb { background-color: var(--scrollbar-color); } .overflowing-element::-webkit-scrollbar-thumb:vertical { min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal { min-width: var(--scrollbar-minlength); }
Hier ist ein Beispiel für CodePen, das die Möglichkeit demonstriert, Bildlaufleisten anzupassen, die ausschließlich von CSS ausgeführt werden. Und
hier ist ein Beispiel, das das Standardverhalten von Bildlaufleisten demonstriert. Sie können sie vergleichen.
Es sollte beachtet werden, dass der obige Code ein Problem hat. Es besteht darin, dass beim Festlegen der
height oder
::-webkit-scrollbar in macOS die nicht feste
::-webkit-scrollbar durch eine feste ersetzt wird (die Standardeinstellungen werden neu definiert). Dies ist jedoch nicht schwer mit einem kleinen Stück JavaScript-Code zu beheben.
CSS und ein bisschen JS
Wir können dem Projekt eine kleine Menge JavaScript-Code hinzufügen, um herauszufinden, ob die Standard-Bildlaufleiste fest ist oder nicht. Es sieht ungefähr so aus:
var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent);
Wenn die Bildlaufleiste festgelegt ist, fügen wir dem
layout-scrollbar-obtrusive Klasse
layout-scrollbar-obtrusive . Diese Klasse kann verwendet werden, um die Eigenschaften für
width und
height nur fester Bildlaufleisten anzupassen. Dies vermeidet die oben beschriebenen Störungen im Verhalten von Bildlaufleisten. Während dieses Eingriffs ändern sich die Bildlaufleisten und das Projekt entfernt sich von den vom Benutzer vorgenommenen Systemeinstellungen. Hier ist der Stil für die
layout-scrollbar-obtrusive :
.layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); }
Hier finden Sie ein Beispiel für die Anwendung einer Technik, bei der CSS und JavaScript zusammen verwendet werden. Zum Vergleich hier ein Beispiel, das das Standardverhalten eines Systems demonstriert.
Zusammenfassung: eine Überprüfung der Lösung des Problems
Auf Geräten mit Touchscreens, die nicht fixierte Bildlaufleisten verwenden (dh auf iOS- und Android-Geräten), verwenden wir einfach das Standardverhalten von Bildlaufleisten.
In macOS haben wir die Möglichkeit, die vom Benutzer vorgenommenen Systemeinstellungen zu berücksichtigen. Dies bedeutet, dass wir nicht versehentlich zwischen nicht festen und festen Bildlaufleisten wechseln. Wir wenden Stile nur auf feste Bildlaufleisten an, die immer sichtbar sind. Dies ermöglicht es uns, das Erscheinungsbild der Seiten an unsere Anforderungen an das Projektdesign anzupassen.
Unter Windows, nämlich in den Firefox- und Chrome-Browsern, gibt es keine standardmäßigen nicht fixierten Bildlaufleisten, aber hier können wir wie in anderen Fällen unseren Ansatz anwenden, der ausschließlich CSS-Funktionen verwendet. Aufgrund der Tatsache, dass wir Arbeitsbeispiele für die Verwendung von mit CSS anpassbaren Bildlaufleisten erstellen konnten, konnten wir eine Einigung mit unserem Designteam erzielen. Wir haben uns für einen Kompromiss entschieden und die Verwendung schwerer JavaScript-Lösungen vermieden.
Hier sind die Demo-Projekte, deren Kern oben beschrieben wurde:
- Standardverhalten der Bildlaufleiste anzeigen.
- Eine Lösung , die nur CSS verwendet. Alle Bildlaufleisten sind gestaltet.
- Eine Lösung , die CSS und JavaScript verwendet. Es werden nur feste Bildlaufleisten gestaltet.
Liebe Leser! Wie gestalten Sie Bildlaufleisten in Ihren Projekten?
