nicht angemeldet
Onepager, scrollen soll zum Seitenanker springen
Gunnar Bittersmann
Matthias ScharwiesHallo, bei einer Seite (Onepager) soll kein langsames scrollen möglich sein, sondern das Scrollen soll gleich den gesamten Bereich zwischen zwei Sprungmarken zeigen. So sollte es aussehen.
Gibt es dafür ein CSS Befehl? Meine Suche im Netz war bisher erfolglos, deshalb bitte ich Euch um Tipps wie ich die Lösung finden kann. Danke.
-
Servus!
Hallo, bei einer Seite (Onepager) soll kein langsames scrollen möglich sein, sondern das Scrollen soll gleich den gesamten Bereich zwischen zwei Sprungmarken zeigen. So sollte es aussehen.
Gibt es dafür ein CSS Befehl?
Hier ist ein Beispiel ohne JavaScript nur mit CSS: :target
One Page CSS-Only Navigation by Alberto Hartzet
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
Hier ist ein Beispiel ohne JavaScript nur mit CSS: :target
One Page CSS-Only Navigation by Alberto Hartzet
Beides geht wohl an der Aufgabenstellung vorbei. Es soll nicht navigiert (geclickt), sondern gescrollt werden.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Servus!
@@Matthias Scharwies
Beides geht wohl an der Aufgabenstellung vorbei. Es soll nicht navigiert (geclickt), sondern gescrollt werden.
ok, neuer Versuch mit Checkbox-Hack:
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
Beides geht wohl an der Aufgabenstellung vorbei. Es soll nicht navigiert (geclickt), sondern gescrollt werden.
ok, neuer Versuch mit Checkbox-Hack:
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
Auch der Versuch schlägt fehl. Was ist da anders? Auch da muss der Nutzer clicken anstatt zu scrollen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Servus!
Auch der Versuch schlägt fehl. Was ist da anders? Auch da muss der Nutzer clicken anstatt zu scrollen.
O menno, jetzt hab ich Kellerkind ohne Smartphone, bzw. digital immigrant endlich kapiert, worum es in der Problembeschreibung geht!
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
ich Kellerkind
at, bist du es?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
-
-
@@MaggieM
Ganz so wohl nicht. Auf Chrome ist die Seite nicht benutzbar.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Ganz so wohl nicht. Auf Chrome ist die Seite nicht benutzbar.
Oh, bei welcher Version funktioniert die angegebene Seite nicht? Bei mir auf MAC Browser 'Google Chrome Version 46.0....' läufts :-)
Mit CSS Scroll Snap Points sollte ich's wohl nicht angehen, da unter diese CSS kaum unterstützt werden wie bei 'caniuse.com' angegeben wird.
-
@@MaggieM
Oh, bei welcher Version funktioniert die angegebene Seite nicht? Bei mir auf MAC Browser 'Google Chrome Version 46.0....' läufts :-)
Ich war noch auf 45, aber auch das Update auf 46 hat keine Besserung gebracht. Chrome scrollt wild umher anstatt beim nächsten Bereich anzuhalten. Ebenfalls Mac OS X, aber noch Yosemite. Du Capitan? Sollte die OS-Version einen Unterschied machen?
Mit CSS Scroll Snap Points sollte ich's wohl nicht angehen, da unter diese CSS kaum unterstützt werden wie bei 'caniuse.com' angegeben wird.
Natürlich kannst du das damit angehen. Solltest du auch. Warum denn nicht? Progressive enhancement
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
...hm, OS X 10.9.5, das müsste ja auch 'Yosemite' sein. Gruß, Maggie
-
@@MaggieM
Natürlich kannst du das damit angehen. Solltest du auch. Warum denn nicht?
Mein Versuch funktioniert nicht :-(
Gruß Maggie
-
@@MaggieM
Natürlich kannst du das damit angehen. Solltest du auch. Warum denn nicht?
Mein Versuch funktioniert nicht :-(
Sorry, ich sollte Euch zeigen, was ich gemacht habe - bestimmt seht Ihr gleich was falsch ist!?
<style> .page { scroll-snap-coordinate: 50% 0; } .docScroller { width:800px; overflow-x: hidden; overflow-y: auto; scroll-snap-destination: 50% 100px; scroll-snap-type: proximity; } </style> </head> <body> <div class="docScroller"> <div class="page"> <img src="images/bg_start.png"> </div> <div class="page">weiteres bild</div> <div class="page">1.Bild</div> <div class="page">weiteres bild</div> </div> </body> </html>
-
-
-
-
-
Als Gag recht nett. Aber auf meinem Laptop verschwinded z.B. die Schaltfläche SCHREIBEN SIE UNS unter (z-index) der fixierten Fußleiste.
Und wenn ich die Schrift kleiner mache Opera / Firefox [Strg][-] dann springt die Seite über mehrere Abschnitte.
Nach Ausschalten von Javascript ist sie nicht mehr scrollbar.
Und das kleine T im Namen graustich kann leicht für ein kleines L gehalten werden ;-) Also Vorsicht mit übertriebenen Designer-Ideen.
Linuchs