Usage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen
Product: Oneo Contao
Contao Version: Contao 4.10.5
Hallo,
ich wollte fragen, ob es möglich wäre, bei einem leichten Scrollen zum nächsten Bereich zu scrollen. Ähnlich wie auf dieser Webseite: https://www.elzland-hotel-pfauen.de/
Schon jetzt danke ich Ihnen für Ihre Antwort und wünsche Ihnen noch einen schönen Tag.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
Support Staff 1 Posted by RockSolid Theme... on 20 Jan, 2021 02:39 PM
Vielen Dank für Ihre Frage.
Ein solcher Effekt lässt sich via CSS realisieren.
Fügen Sie dafür bitte folgenden CSS-Code in die Datei files/oneo/css/custom.css ein:
2 Posted by jan.kout on 20 Jan, 2021 02:59 PM
Vielen Dank für die schnelle Antwort. Leider funktioniert es noch nicht so richtig.
Siehe https://dev.hotelotto.com/de/
Support Staff 3 Posted by RockSolid Theme... on 20 Jan, 2021 03:30 PM
Sie haben auf Ihrer Seite anscheinend das Contao-CSS-Framework aktiviert. Dadurch wird dem gesamten Artikel über die CSS-Klasse
.block
die Eigenschaftoverflow: hidden
zugewiesen. Durch diese Eigenschaft wird das Scroll-Snapping der Kind-Elemente deaktiviert.4 Posted by jan.kout on 20 Jan, 2021 03:45 PM
Das war es! Vielen Dank für den Hinweis. :-)
Allerdings funktioniert nun der Smootheffekt nicht, wenn man auf die Arenanavigationspunkte klickt.
Support Staff 5 Posted by RockSolid Theme... on 21 Jan, 2021 09:39 AM
Ersetzen Sie dafür bitte folgenden JavaScript-Code in der Datei files/oneo/js/script.js
mit diesen Code-Zeilen:
6 Posted by jan.kout on 21 Jan, 2021 09:57 AM
Perfekt. Vielen lieben Dank. Wie immer ein toller Kundenservice.
7 Posted by jan.kout on 22 Jan, 2021 10:49 AM
Ich möchte noch nachhacken. Ein Problem besteht leider immer noch. Sobald Footer nach einem centered-wrapper mit 100vh kommt, kann man zum Footer gar nicht runterscrollen. Haben Sie da vielleicht noch eine Idee, was ich da einstellen muss?
Support Staff 8 Posted by RockSolid Theme... on 22 Jan, 2021 11:39 AM
Für alle Bereiche zu denen gescrollt werden soll, müssen Sie CSS-Eigenschaft
scroll-snap-align
setzen:Weitere Informationen zu Scroll Snapping finden Sie auch in folgenden Artikel: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
9 Posted by jan.kout on 22 Jan, 2021 11:58 AM
Danke. Das hatte ich auch schon. Allerdings macht es Probleme, wenn da eine Seite ohne areanavigation ist, wie es bei Blog der Fall ist. https://dev.hotelotto.com/de/blog
Support Staff 10 Posted by RockSolid Theme... on 22 Jan, 2021 02:52 PM
Auf Seiten die nicht aus solchen Scroll-Bereichen bestehen, sollten Sie die Eigenschaft
scroll-snap-type
fürhtml
undbody
nicht setzen bzw. deaktivieren indem Sie sie aufscroll-snap-type: none
einstellen.11 Posted by jan.kout on 31 Jan, 2021 10:04 PM
Kann es sein, dass dadurch ein anderes Verhalten blockiert wird?
Siehe https://help.rocksolidthemes.com/discussions/contao/22081-fehler-ta...
Mein Script dazu:
Support Staff 12 Posted by RockSolid Theme... on 01 Feb, 2021 11:25 AM
Sie haben den JavaScript-Code anscheinend bereits erfolgreich im „// Smooth scrolling“-Block integriert.
Das Scrolling-Problem lässt sich eventuell lösen indem Sie den Code an den Anfang des Event-Handlers verschieben (vor die Zeile
var href = $(this)
).13 Posted by jan.kout on 01 Feb, 2021 11:33 AM
Vielen Dank für Ihre Antwort.
Nein, den Code habe ich in einer separaten Datei, nicht in der Datei von Ihnen. Wo in Ihrer Datei soll ich ihn also Ihrer Meinung nach einfügen? Und welchen Teil davon?
14 Posted by jan.kout on 01 Feb, 2021 01:35 PM
Ich habe den Block für Smoothscrolling wie folgt. Allerdings geht es immer noch nicht.
Support Staff 15 Posted by RockSolid Theme... on 02 Feb, 2021 10:19 AM
Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:
Mit folgendem JavaScript-Code sollte sich der gewünschte Effekt umsetzen lassen:
Der Code-Block
$('.header-navigation a').click(function(event) {
aus Ihrem Haupt-JavaScript muss dafür noch entfernt werden.Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: https://rocksolidthemes.com/de/contao/service/agenturen
16 Posted by jan.kout on 02 Feb, 2021 10:49 AM
Vielen lieben Dank. Das schätze ich sehr und bin Ihnen sehr dankbar.
17 Posted by jan.kout on 12 Feb, 2021 05:08 PM
Hallo,
Ich melde mich nochmals. Leider funktioniert das Scrollen am iPad nicht so richtig. Siehe hotelotto.com. Das schon beim Scrollen und wenn man die Navigationspunkte der Areanavigation anklickt.
Support Staff 18 Posted by RockSolid Theme... on 15 Feb, 2021 08:31 AM
Das Scroll-Snapping sollte sich im Safari mit folgendem CSS-Code deaktivieren lassen:
19 Posted by jan.kout on 18 Feb, 2021 06:38 AM
Das ist zwar schön. Aber ich möchte, dass es da trotzdem funktioniert. Es soll in allen Brownsern funktionieren.