CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

... komplette Frage anzeigen

3 Antworten

Weiß nicht, ob es in deinem Anwendungsfall hilfreich sein könnte, denn es handelt sich hierbei um experimentelle Technologie, allerdings möchte ich ergänzend eine CSS-Only Lösung hinzufügen.

Was die Kompatibilität angeht: Die Lösung wird nur vom Firefox weitgehend unterstützt. IE und Safari sollen wohl auch hier und da was umgesetzt haben, allerdings sollten das wohl sehr unfertige Lösungen sein.

Desweiteren werden im Moment größere Änderungen an dem Modul vorgenommen, das heißt also dass einige Eigenschaften sehr wahrscheinlich abgeschafft werden.

Für deinen Fall kann das CSS Modul "CSS Scroll Snap Points Moduel Level 1" von Interesse sein. Dabei lassen sich Snap-Points in einem scrollbaren Container festlegen, zu denen automatisch hingescrollt werden wenn in die entsprechende Richtung gescrollt wird.

Relevant sind dabei die Eigenschaften scroll-snap-type (womit sich die Art und Weise festlegen lässt) und scroll-snap-points-y. (bzw. scroll-snap-points-x bei horizontalem Scrolling)

Letztere Eigenschaft (scroll-snap-points-x bzw. scroll-snap-points-y) fallen übrigens unter den o.g. Änderungen, d.h. diese werden abgeschafft werden.

Hier eine kleine Demo: (Funktioniert wohl nur im Firefox 39+):
https://jsfiddle.net/ke27ffut/

Genauere Informationen kannst du hier entnehmen:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y
https://developer.mozilla.org/en-US/docs/tag/CSS%20Scroll%20Snap%20Points

Hier ein genereller Überblick über die ganzen Eigenschaften mit Erklärungen: (Funktionieren alle aber nicht zwingend)
https://css-tricks.com/introducing-css-scroll-snap-points/

Und hier nochmal ein Link zur W3C-Spezifikation des Moduls:
https://www.w3.org/TR/css-snappoints-1/

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von ranixi
28.04.2016, 15:03

Danke für die kompetente Antwort, jedoch bringt es niemanden etwas wenn es nur auf dem Firefox funktioniert. Denn auch heute surfen immer noch 23 % der Menschen auf dem IE herum. Und diese Lösung, die nur auf einem Browser funktioniert, meine Freunde, würde meinem Lehrer überhaupt nicht passen.

0

Nur mit CSS wird das nix. Maus-Events kannst du nur mit JavaScript im Browser abfragen.

Beispiel:

http://alvarotrigo.com/fullPage/

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von ranixi
27.04.2016, 11:44

Ah okay, dann halt nicht. Blöder Lehrer, will dass wir ohne PHP und JavaScript eine Website machen. Dazu noch ein Kontaktformular. Ja, so ist das leben... Die verdammten Bürolisten xD... Aber danke trotzdem scheint mir eine super Seite zu sein.

0

Befasse dich mal mit jQuery...http://jquery.com

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?