Scrollbars auf schweber

Das Design von Web -Scroll -Balken sollte sowohl die Benutzererfahrung als auch die Zugänglichkeit berücksichtigen. Im Allgemeinen sollte die Bildlaufleiste angezeigt werden, wenn ein Bereich gescrollt werden muss. Die Online-Welt verändert sich jedoch ständig, und einige clevere Techniken können die Benutzererfahrung verbessern. In diesem Artikel wird eine Methode eingeführt, mit der die Bildlaufleiste standardmäßig versteckt wird und nur angezeigt wird, wenn die Maus schwebt.

Diese Methode wurde von Thomas Gladdines vorgeschlagen und in meinen Tests funktionierte sie bei Chrome-, Firefox- und Safari -Browsern, die nicht von den Einstellungen von MacOS -Systemen betroffen sind, und hat eine gute Kompatibilität.

Das Kernprinzip besteht darin, eine Maskenebene zu verwenden, um die Bildlaufleiste abzudecken. Durch das Erstellen einer Maskenebene, die genau die gleiche Breite wie die Bildlaufleiste ist (vorausgesetzt, die Breite ist hier 17px, muss die tatsächliche Breite möglicherweise durch Skript berechnet werden) und das Einstellen einer ausreichenden Höhe kann die Bildlaufleiste perfekt versteckt werden. Es kann sogar Animation der Positionierung der Maskenschicht übergehen, um den Effekt von allmählich auftretenden, was sehr clever ist.

Es ist erwähnenswert, dass sich dies auf die native Scrollbar des Elements bezieht, nicht auf die gefälschte Scrollbar. Das Schmieden von Scrollbars ist ebenfalls eine praktikable Lösung. Ben Nadel hat einmal eingeführt, wie Slack umgesetzt wird. Die Methode von Slack besteht darin, die Bildlaufleiste in einen von overflow Überlaufeigenschaft verborgenen Bereich zu erzwingen und dann eine virtuelle Bildlaufleiste zu erstellen, um die native Scrollbar zu simulieren, wodurch mehr Kontrolle über die Scrollbar erlangt wird. Dies ist ein anderer Ansatz, als die Bildlaufleiste zum Rendern zu erzwingen. Darüber hinaus hindert dieser Ansatz Sie nicht daran, die Bildlaufleiste zu stylen, was einige Vorteile hat, z. B. genau die Breite der Bildlaufleiste genau.

1. Zum jetzigen Zeitpunkt lautet die Anweisungen von MacOS: "Wenn Ihr Gerät Gestenaktionen unterstützt, werden die Bildlaufleisten vor dem Scrollen versteckt. Andernfalls sind sie sichtbar."

Das obige ist der detaillierte Inhalt vonScrollbars auf schweber. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!