• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS scroll-snap

webFire

Neues Mitglied
Hallo,

ich habe nun schon sehr viel google gefragt. Sehr viel nach geschaut und geprüft woran es liegen könnte. Aber leider kein Ergebnis, vielleicht aber hat hier jemand eine Idee?
Ich bastel momentan wieder an unsere Feuerwehr Webseite. Hier nutze ich die Scroll-Snap Funktion, jedoch funktioniert das nur im Safari. Wenn ich es im Firefox oder Chrome aufrufe oder sogar auf ein Android Smartphone, ist die Funktion scroll-snap außer Funktion. Die Startseite könnt ihr euch unter folgender Adresse anschauen:



Wenn ich jedoch aber eine Galerie aufrufe wo ich ebenfalls scroll-snap nutze, dann funktioniert diese. Folgendes Beispiel unter folgender Adresse:


Ich habe sehr viel probiert, auch schon das SECTION mit einem Div Container ersetzt, alles hat zu keinem positiven Ergebnis geführt. In Safari alles schön und gut, jedoch dann aber Firefox oder Chrome klappt es nicht. Habe auch bei MDN schon geschaut und kann keinen Fehler entdecken.

Ich hoffe es kann jemand helfen? Falls jemand den Code hier benötigt dann kann ich Ihn gern hier posten?

Mit freundlichen Grüßen,
Kevin
 
Werbung:
Ich sehe in der Console von Chrome viele Fehlermeldungen, z.B. dass das jQuery File nicht gefunden wird.
 
Werbung:
Die Scripte werden dafür nicht benötigt. Diese sind nur für die Fancybox, das hat aber mit dem CSS Scroll-Snap nix zu tun eigentlich
 
Ach nochwas.
Du benutzt zb id="desk" öffters , das ist nicht erlaubt.
Ids dürfen nur einmalig auf einer Seite sein.
Nutze dafür class.

Vieleicht wäre anstatt section zu nutzen das figure und figcaption Element hier besser aufgehoben
 
Zuletzt bearbeitet:
Werbung:
Um den Edge wäre ich jetzt nicht böse glaube ich :D

Aber was ist denn jetzt an dem Beispiel von dir anders? Bin ich da grad zu blöd?
 
Werbung:
Ok also ich habe es mal durch probiert. Das problem wäre dann das der Footer unten fest wäre, dieser sollte aber natürlich dann zum Schluss des Scrollens erst erscheinen. Dann das zweite Problem bzw auch Fehlerquelle scheinbar, das die Bilder das Problem sind. Diese hatte ich als normales <img> drin.
 
Ok da ist das mit dem Footer auch geklärt :cool: Danke

Ich habe in jeder section ein Bild das sozusagen der Hintergrund ist, dieses soll sich der Bildschirmgröße natürlich anpassen. Wenn ich aber dieses drin lass zerstört es wieder den scroll-snap. Ich muss das Bild noch irgendwie in den Snap bekommen?
 

Sobald ich die img Tags raus nehme geht es wieder
 
Werbung:
Das habe ich probiert und das würde funktionieren, aber da ich auf die Bilder eine Transparenz liegen habe ist es wieder das problem das dann die div Box ebenfalls Transparent wird. Das soll aber nicht passieren da dies ja lesbar sein soll.
 
Ok Danke die Funktion kannte ich noch nicht.
Aber ich Zweifel gerade an mir selbst, auf der Seite die Du hier verlinkt hast funktioniert es. Jedoch sobald ich es bei mir mache geht es nicht mehr :-(
 
Jetzt funktioniert es, keine ahnung warum das vorher nicht ging.

Jedoch im Chrome jetzt der Footer sich nicht einscrollen lässt.
 
Werbung:
Werbung:
Also habe ich rein theoretisch gemacht aber trotzdem nix

Hier geht es ja wirklich nur um die Galerie das die Bilder von rechts nach links oder umgedreht geschellt werden.

Kleines Update um 20 Uhr: Es liegt am overflow
 
Zuletzt bearbeitet:
Der Spider wird da nicht mehr gebraucht. Ich möchte oder hatte dafür schon das scroll-snap. Das funktionierte auch bis wir dann gestern die Seite fertig hatten.

Mit scroll-snap kann man auch eine Gallery machen, aber jetzt geht es gar nicht mehr.
 
Zurück
Oben