Onepage_XH scrollen nur mit CSS - ohne JS

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Onepage_XH scrollen nur mit CSS - ohne JS

Post by frase » Sat Mar 24, 2018 10:17 am

Beispiel:

JSFiddle

Was haltet ihr davon?

BTW:
HBTYC*


---
* HBTYC
Happy Birthday to You, Christoph!

Tata
Posts: 3587
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by Tata » Sat Mar 24, 2018 11:17 am

Sehr interessant. So viel neues gibt es unter CSS, dass ein kann es kaum alles folgen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2967
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by lck » Sat Mar 24, 2018 11:49 am

frase wrote:
Sat Mar 24, 2018 10:17 am
Happy Birthday to You, Christoph!
Auch von mir alles Gute zum Geburtstag, viel Glück und vor allem Gesundheit! Auch für die nächsten 49 Jahre.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

olape
Posts: 2745
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by olape » Sat Mar 24, 2018 12:05 pm

lck wrote:
Sat Mar 24, 2018 11:49 am
frase wrote:
Sat Mar 24, 2018 10:17 am
Happy Birthday to You, Christoph!
Auch von mir alles Gute zum Geburtstag, viel Glück und vor allem Gesundheit! Auch für die nächsten 49 Jahre.
Da schliesse ich mich an. Nur die besten Wünsche. (- und weiterhin viel Kraft und Elan für dieses Projekt. :P )
Gruß Olaf, Plugins for CMSimple_XH

Ich habe schon lange den Verdacht, dass so viele so eifrig auf Gender, Trans und Queer machen:
Weil sie für das Fachliche ganz einfach zu doof sind.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by cmb » Sat Mar 24, 2018 1:10 pm

Vielen Dank für die Glückwünsche!
frase wrote:
Sat Mar 24, 2018 10:17 am
JSFiddle

Was haltet ihr davon?
Interessant! Um ein solches CSS-Scrolling für einen Onepager einzusetzen, müsste man wohl aber die jeweiligen Scrollpositionen per JS ermitteln, und dann die entsprechenden CSS-Regeln dynamisch erzeugen. Aber: wie kann man #main hier auch manuell scrollbar machen?
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by frase » Sat Mar 24, 2018 1:33 pm

cmb wrote:
Sat Mar 24, 2018 1:10 pm
Interessant! Um ein solches CSS-Scrolling für einen Onepager einzusetzen, müsste man wohl aber die jeweiligen Scrollpositionen per JS ermitteln, und dann die entsprechenden CSS-Regeln dynamisch erzeugen. Aber: wie kann man #main hier auch manuell scrollbar machen?
Tja, eigentlich hatte ich nur ein Alibi für die Wünsche gesucht ... :D

Also:
Nach näherem Betrachten ist das wohl für einen Onepager nicht (oder nicht so leicht und wahrscheinlich nicht ohne JS) umsetzbar.
Man müsste irgendeine Form von dynamischem CSS einsetzen (PHP, SASS, LESS ...).
Andererseits könnte man jeden Article absolut gleich hoch machen - was sicher nicht bei jeder Seite geht.
Und du hast recht: #main-Scrolling dürfte auch nicht funktionieren.

Fazit: Ich bereue es nicht, das Thema angesprochen zu haben - auch, wenn sich die Machbarkeit bei Onepagern als unmöglich herausstellt.
Wieder was gelernt. Vielleicht passt es im einen oder anderen Fall.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Onepage_XH scrollen nur mit CSS - ohne JS

Post by cmb » Sat Mar 24, 2018 5:19 pm

frase wrote:
Sat Mar 24, 2018 1:33 pm
Man müsste irgendeine Form von dynamischem CSS einsetzen (PHP, SASS, LESS ...).
Man könnte das auch mit JavaScript machen, und zwar per CSSStyleDeclaration Manipulation. Das sollte kein besonderes Problem darstellen.
frase wrote:
Sat Mar 24, 2018 1:33 pm
Und du hast recht: #main-Scrolling dürfte auch nicht funktionieren.
Das wäre halt der Show-Stopper.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply