Usage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen

jan.kout's Avatar

jan.kout

20 Jan, 2021 12:55 PM

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.

  1. Support Staff 1 Posted by RockSolid Theme... on 20 Jan, 2021 02:39 PM

    RockSolid Themes's Avatar

    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:

    html, body {
        scroll-snap-type: y mandatory;
    }
    .centered-wrapper {
        scroll-snap-align: start;
    }
    
  2. 2 Posted by jan.kout on 20 Jan, 2021 02:59 PM

    jan.kout's Avatar

    Vielen Dank für die schnelle Antwort. Leider funktioniert es noch nicht so richtig.

    Siehe https://dev.hotelotto.com/de/

  3. Support Staff 3 Posted by RockSolid Theme... on 20 Jan, 2021 03:30 PM

    RockSolid Themes's Avatar

    Sie haben auf Ihrer Seite anscheinend das Contao-CSS-Framework aktiviert. Dadurch wird dem gesamten Artikel über die CSS-Klasse .block die Eigenschaft overflow: hidden zugewiesen. Durch diese Eigenschaft wird das Scroll-Snapping der Kind-Elemente deaktiviert.

  4. 4 Posted by jan.kout on 20 Jan, 2021 03:45 PM

    jan.kout's Avatar

    Das war es! Vielen Dank für den Hinweis. :-)

    Allerdings funktioniert nun der Smootheffekt nicht, wenn man auf die Arenanavigationspunkte klickt.

  5. Support Staff 5 Posted by RockSolid Theme... on 21 Jan, 2021 09:39 AM

    RockSolid Themes's Avatar

    Ersetzen Sie dafür bitte folgenden JavaScript-Code in der Datei files/oneo/js/script.js

    scrollContainer.stop(true).animate(
        {
            scrollTop: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
        },
        {
            duration: 300,
            easing: 'easeOutCubic',
        }
    );
    

    mit diesen Code-Zeilen:

    (document.scrollingElement || document.documentElement).scrollTo({
        top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
        behavior: 'smooth',
    });
    
  6. 6 Posted by jan.kout on 21 Jan, 2021 09:57 AM

    jan.kout's Avatar

    Perfekt. Vielen lieben Dank. Wie immer ein toller Kundenservice.

  7. 7 Posted by jan.kout on 22 Jan, 2021 10:49 AM

    jan.kout's Avatar

    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?

  8. Support Staff 8 Posted by RockSolid Theme... on 22 Jan, 2021 11:39 AM

    RockSolid Themes's Avatar

    Für alle Bereiche zu denen gescrollt werden soll, müssen Sie CSS-Eigenschaft scroll-snap-align setzen:

    #footer {
        scroll-snap-align: start;
    }
    

    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. 9 Posted by jan.kout on 22 Jan, 2021 11:58 AM

    jan.kout's Avatar

    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

  10. Support Staff 10 Posted by RockSolid Theme... on 22 Jan, 2021 02:52 PM

    RockSolid Themes's Avatar

    Auf Seiten die nicht aus solchen Scroll-Bereichen bestehen, sollten Sie die Eigenschaft scroll-snap-type für html und body nicht setzen bzw. deaktivieren indem Sie sie auf scroll-snap-type: none einstellen.

  11. 11 Posted by jan.kout on 31 Jan, 2021 10:04 PM

    jan.kout's Avatar

    Kann es sein, dass dadurch ein anderes Verhalten blockiert wird?

    Siehe https://help.rocksolidthemes.com/discussions/contao/22081-fehler-ta...

    Mein Script dazu:

    var hashTagActive = "";
        $(".header-navigation a").click(function (event) {
            if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
                //event.preventDefault();
                //calculate destination place
                var dest = 0;
                if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                    dest = $(document).height() - $(window).height();
                } else {
                    dest = $(this.hash).offset().top;
                }
                //go to destination
                $('html,body').animate({
                    scrollTop: dest
                }, 1500, 'swing');
                hashTagActive = this.hash;
            }
        });
    
  12. Support Staff 12 Posted by RockSolid Theme... on 01 Feb, 2021 11:25 AM

    RockSolid Themes's Avatar

    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. 13 Posted by jan.kout on 01 Feb, 2021 11:33 AM

    jan.kout's Avatar

    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. 14 Posted by jan.kout on 01 Feb, 2021 01:35 PM

    jan.kout's Avatar

    Ich habe den Block für Smoothscrolling wie folgt. Allerdings geht es immer noch nicht.

    // Smooth scrolling (only if jQuery is available)
        (function($) {
            if (!$) {
                return;
            }
    
            if (!$.easing.easeOutCubic) {
                $.easing.easeOutCubic = function(p) {
                    return 1 - Math.pow(1 - p, 3);
                };
            }
    
            var $window = $(window);
            var scrollContainer = $('html,body');
            var mediaQuery = window.matchMedia && window.matchMedia('(max-width: 900px)');
    
            $(document.body).on('click', 'a[href*="#"]', function(event) {
                var hashTagActive = '';
                $('.header-navigation a').click(function(event) {
                    if (hashTagActive != this.hash) {
                        //this will prevent if the user click several times the same link to freeze the scroll.
                        //event.preventDefault();
                        //calculate destination place
                        var dest = 0;
                        if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                            dest = $(document).height() - $(window).height();
                        } else {
                            dest = $(this.hash).offset().top;
                        }
                        //go to destination
                        $('html,body').animate(
                            {
                                scrollTop: dest,
                            },
                            1500,
                            'swing'
                        );
                        hashTagActive = this.hash;
                    }
                });
                var href = $(this)
                    .attr('href')
                    .split('#');
                var documentHref = document.location.href.split('#');
                if (href[0] && documentHref[0].substr(-href[0].length) !== href[0]) {
                    return;
                }
                if (!href[1]) {
                    return;
                }
                var target = $('#' + href[1]);
                if (!target.length || event.metaKey) {
                    return;
                }
                event.preventDefault();
                this.blur();
                if (window.history && window.history.pushState) {
                    window.history.pushState('', document.title, window.location.href.split('#')[0] + '#' + target.attr('id'));
                } else {
                    var scroll = {
                        x: $window.scrollLeft(),
                        y: $window.scrollTop(),
                    };
                    window.location.hash = '#' + target.attr('id');
                    $window.scrollLeft(scroll.x);
                    $window.scrollTop(scroll.y);
                }
                (document.scrollingElement || document.documentElement).scrollTo({
                    top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
                    behavior: 'smooth',
                    delay: 200,
                    duration: 800,
                });
                (function() {
                    function triggerEvent(element, eventName) {
                        var evt = document.createEvent('HTMLEvents');
                        evt.initEvent(eventName, true, true);
                        element.dispatchEvent(evt);
                    }
                    var link = document.querySelector('.tab-navigation a[href$="' + document.location.hash + '"]');
                    if (link) {
                        triggerEvent(link, 'click');
                    }
                })();
            });
        })(window.jQuery);
    
  15. Support Staff 15 Posted by RockSolid Theme... on 02 Feb, 2021 10:19 AM

    RockSolid Themes's Avatar

    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:

     // Smooth scrolling (only if jQuery is available)
        (function($) {
            if (!$) {
                return;
            }
    
            if (!$.easing.easeOutCubic) {
                $.easing.easeOutCubic = function(p) {
                    return 1 - Math.pow(1 - p, 3);
                };
            }
    
            var $window = $(window);
            var scrollContainer = $('html,body');
            var mediaQuery = window.matchMedia && window.matchMedia('(max-width: 900px)');
    
            $(document.body).on('click', 'a[href*="#"]', function(event) {
                var href = $(this)
                    .attr('href')
                    .split('#');
                var documentHref = document.location.href.split('#');
                if (href[0] && documentHref[0].substr(-href[0].length) !== href[0]) {
                    return;
                }
                if (!href[1]) {
                    return;
                }
                var target = $('#' + href[1]);
                if (!target.length || event.metaKey) {
                    return;
                }
                var tabLink = document.querySelector('.tab-navigation a[href$="#' + href[1] + '"]');
                if (tabLink) {
                    triggerEvent(tabLink, 'click');
                }
                event.preventDefault();
                this.blur();
                if (window.history && window.history.pushState) {
                    window.history.pushState('', document.title, window.location.href.split('#')[0] + '#' + target.attr('id'));
                } else {
                    var scroll = {
                        x: $window.scrollLeft(),
                        y: $window.scrollTop(),
                    };
                    window.location.hash = '#' + target.attr('id');
                    $window.scrollLeft(scroll.x);
                    $window.scrollTop(scroll.y);
                }
                (document.scrollingElement || document.documentElement).scrollTo({
                    top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0)),
                    behavior: 'smooth',
                    delay: 200,
                    duration: 800,
                });
            });
        })(window.jQuery);
    

    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. 16 Posted by jan.kout on 02 Feb, 2021 10:49 AM

    jan.kout's Avatar

    Vielen lieben Dank. Das schätze ich sehr und bin Ihnen sehr dankbar.

  17. 17 Posted by jan.kout on 12 Feb, 2021 05:08 PM

    jan.kout's Avatar

    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.

  18. Support Staff 18 Posted by RockSolid Theme... on 15 Feb, 2021 08:31 AM

    RockSolid Themes's Avatar

    Das Scroll-Snapping sollte sich im Safari mit folgendem CSS-Code deaktivieren lassen:

    @supports (-webkit-hyphens:none) {
        html, body {
            scroll-snap-type: none;
        }
    }
    
  19. 19 Posted by jan.kout on 18 Feb, 2021 06:38 AM

    jan.kout's Avatar

    Das ist zwar schön. Aber ich möchte, dass es da trotzdem funktioniert. Es soll in allen Brownsern funktionieren.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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