Home → Contao →

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

• Edit

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

   

   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;
   }
   

   • Edit

2. 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/

   • Edit

3. 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 Eigenschaft overflow: hidden zugewiesen. Durch diese Eigenschaft wird das Scroll-Snapping der Kind-Elemente deaktiviert.

   • Edit

4. 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.

   • Edit

5. 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

   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',
   });
   

   • Edit

6. 6 Posted by jan.kout on 21 Jan, 2021 09:57 AM

   

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

   • Edit

7. 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?

   • Edit

8. 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:

   #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

   • Edit

9. 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

   • Edit

10. 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ür html und body nicht setzen bzw. deaktivieren indem Sie sie auf scroll-snap-type: none einstellen.

    • Edit

11. 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:

    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;
            }
        });
    

    • Edit

12. 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)).

    • Edit

13. 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?

    • Edit

14. 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.

    // 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);
    

    • Edit

15. 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:

     // 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

    • Edit

16. 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.

    • Edit

17. 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.

    • Edit

18. 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:

    @supports (-webkit-hyphens:none) {
        html, body {
            scroll-snap-type: none;
        }
    }
    

    • Edit

19. 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.

    • Edit