Erstens sind Scrollbalken eine Frage der Benutzerfreundlichkeit und Zugänglichkeit. Zweitens, eine Faustregel: Wenn ein Bereich scrollbar ist, sollte er einen sichtbaren Scrollbalken haben. Aber das Web ist ein großer Ort und ich mag Tricks, also werde ich die Idee behandeln, sie nur beim Hovern anzuzeigen. Sogar macOS selbst¹ verbirgt Scrollbalken standardmäßig und zeigt sie kontextbezogen und bei Interaktion an. Dasselbe auf iOS, was zu verwirrenden Momenten führt.
Davon abgesehen, hier ist eine Möglichkeit, Scrollbalken standardmäßig auszublenden und sie nur anzuzeigen, wenn das Element angefahren wird. Sie wurde von Thomas Gladdines erstellt, der mir auch darüber geschrieben hat
Bei schnellen Tests auf meinem Rechner funktioniert es in Chrome, Firefox und Safari, unabhängig von meinen macOS-Einstellungen. Ziemlich robust also.
Der Trick ist, dass mask den Scrollbalken abdeckt! Wenn Sie also eine mask erstellen, die genau so breit ist wie der Scrollbalken (hier rate ich nur, dass 17px ihn abdecken werden) und sehr, sehr hoch ist (beides sollte wahrscheinlich von einem Skript berechnet werden), kann sie den Scrollbalken perfekt abdecken. Sie können sogar die Position der Maske transition, um einen Ein-/Ausblendeffekt zu simulieren. Sehr clever.
Bemerkenswert ist, dass dies der *echte* Scrollbalken des Elements ist und kein gefälschter. Einen gefälschten zu erstellen, könnte ein anderer Ansatz sein. Ben Nadel hat behandelt, wie Slack das macht. Ihr Trick besteht darin, den Scrollbalken in einem Bereich rendern zu lassen, der durch Overflow verborgen ist, und einen virtuellen Scrollbalken zu erstellen, der den nativen nachahmt (über den Sie dann direktere Kontrolle hätten). Es ist auch kein Erzwingen des Scrollbalkens, was etwas anderes ist, das Sie tun können, wenn Sie motiviert sind. Und nichts davon hindert Sie daran, den Scrollbalken zu stylen, was sogar einige Vorteile haben könnte, wie die Angabe seiner exakten Breite.
- Wie ich schreibe: „Wenn Ihr Gerät Gesten zulässt, werden Scrollbalken ausgeblendet, bis Sie mit dem Scrollen beginnen. Andernfalls sind sie sichtbar.“ ↩️
Ich verwende immer die
::-webkit-scrollbar-*Pseudo-Eigenschaften, sie werden fast überall unterstützt, außer in Firefox und IE. Der einzige Nachteil ist, dass Übergänge von diesen Eigenschaften nicht unterstützt werden.Während Firefox die Standard
scrollbar-*Eigenschaften unterstützt. Sie sind nicht so leistungsfähig wie::-webkit-scrollbar-*, aber sie unterstützen Übergänge beiscrollbar-colorDie Hauptidee hinter diesem Trick war, das langjährige Problem des Ein- und Ausblendens eines nativen (gestylten) Scrollbalkens in Webkit-Browsern zu lösen. Die Webkit-Pseudoselektoren unterstützen leider keine Übergänge.
Das Gute an MacOS ist, dass es Ihnen die Wahl lässt. Wenn Sie die Scrollbalken für die Barrierefreiheit benötigen, können Sie sie haben.
Wir brauchen diese Hacks nur, weil Windows sich weigert, gute Scrollbalken auf Betriebssystemebene zu implementieren.
OSX Lion wird bald 10 Jahre alt…
Vielleicht hat das nächste Windows es.
Wenn Sie die Scrollbalken ausblenden müssen (und einfach, warum, aber) stellen Sie sicher, dass Sie dies nur auf Geräten tun, auf denen der Benutzer tatsächlich hoovern kann. Was, wenn wir vernünftig sind, wahrscheinlich der geringste Teil des Traffics Ihrer Website ist, aber na ja.
Sie haben es hier behandelt
Im Jahr 2014 (für mich wie gestern) habe ich ein winziges JavaScript geschrieben, das gefälschte Scrollbalken anwendet (auf einem Container mit überlaufendem Inhalt), wegen der Styling-Möglichkeiten, die damals unübertroffen waren im Vergleich zu nativer Anpassung und dies auch heute noch (und wahrscheinlich auch in Zukunft) ermöglichen.
https://github.com/yaireo/fakescroll
Wäre es möglich,
blend-modezu verwenden, damit der Text unsichtbar ist, während der Scrollbalken weiterhin verborgen ist?Ein langer Schuss, aber... könnte je nach Browserhersteller funktionieren.
Wie würden Sie diese Methode gleichzeitig für vertikale und horizontale Scrollbalken verwenden?
Es ist auch möglich, scrollbar-color und ::-webkit-scrollbar-thumb / ::-webkit-scrollbar zu verwenden. Machen Sie sie transparent und ändern Sie die Farbe bei :hover.