Trick-Kiste
kaufen
kaufen
Overflow auto (horizontal scrollen) mit vor und zurück Button
Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.
Vorschau
Bei der Gestaltung von horizontal scrollbaren Sektionen auf Desktops ist es klug, Vorwärts- und Rückwärts-Buttons als Backup einzufügen. Nicht alle Nutzer sind in der Lage, horizontal zu scrollen. Mein bereitgestellter Code ermöglicht dir das nahtlose Einbinden solcher Buttons in Webflow, die bequem über Attribute gesteuert werden können. Wenn also ein Seitenbesucher mit seiner Maus nur vertikal scrollen kann, kann er trotzdem eine Sektion, die von dir auf Overflow auto gestellt ist, über die Button steuern.
Zusätzlich grauen sich die Button automatisch aus, sobald die Liste durchgescrollt ist. Und es wird immer so weit gescrollt, wie ein item in der horizontal scrollbaren Liste breit ist. Dieser Wert wird über ein Attribute, welches du in Webflow vergibst, automatisch übernommen.
Vorteile dieser Lösung:
- Barrierefreiheit: Die Buttons bieten eine barrierefreie Alternative für Nutzer, die Schwierigkeiten beim horizontalen Scrollen haben.
- Benutzerfreundlichkeit: Die Buttons erhöhen die Nutzerfreundlichkeit, indem sie eine zusätzliche Navigationsmöglichkeit bieten.
- Verbesserte Navigation: Nutzer können bequem zwischen den Sektionen wechseln, ohne präzises horizontales Scrollen zu benötigen.
- Konsistenz: Die Buttons sorgen für eine konsistente Benutzererfahrung über verschiedene Geräte hinweg.
- Flexibilität: Die Möglichkeit, die Position und das Design der Buttons anzupassen, ermöglicht eine nahtlose Integration in das Design deiner Website.
- Einfache Implementierung: Der bereitgestellte Code und die Attribute ermöglichen eine unkomplizierte Integration der Buttons in deine Webflow-Website.
Die Kombination aus intuitiver Navigation, Barrierefreiheit und Anpassbarkeit macht diese Lösung ideal, um sicherzustellen, dass alle Nutzer problemlos zwischen den horizontal scrollbaren Sektionen navigieren können.
.svg)
English