So verhindern Sie, dass der Körper mit dem Responsive-Menü scrollt

Ich versuche das richtig umzusetzen Responsives Menü Plugin in ein WordPress-Theme. Das Problem tritt auf, wenn das Push-Side-Menü geöffnet ist, was die Ursache ist body um sich beim vertikalen Scrollen zu bewegen.

In diesem Moment gibt es eine Lösung für diese Vorlagenseite das funktioniert wunderbar und ich bin mit dem Ergebnis zufrieden.

Die Frage:
Unter Berücksichtigung der Antwort von Outsource WordPress, die die oben angegebene Seite behebt, besteht die Möglichkeit, den folgenden Code zu optimieren, um beispielsweise auch auf anderen Vorlagenseiten allgemeiner verwendet werden zu können hier wie schon läuft hier?

ich vermute das .edge-ils-item-link und .edge-ils-content-table sind Variablen, aber ich habe keine Ahnung, wie ich das angehen und anpassen soll. Ich habe einige Tests durchgeführt, um diese Elemente zu ersetzen, aber ohne positive Ergebnisse. Vielleicht ist es nicht so einfach, es ist mehr als das. Das kenne ich auch edge-wrapper, edge-wrapper-inner, wpb_wrapper auf jeder Seite zu finden sind, könnten dies die gemeinsamen Elemente sein, die die Lösung ändern und für jede Seite verfügbar machen könnten.

Es wird auch großartig sein, jQuery bereit für die neueste Version zu sein (zu diesem Zeitpunkt verwende ich jQuery Migrate 1.4.1 und eine alte Version von WordPress, um zumindest auf der Seite, für die es entworfen wurde, funktionsfähig zu sein).

.scroll-lock{position:fixed !important;}

$(document).ready(function() {
    var windowTop = 0;
    var menuOpen = 0;
    var offsetContainerList = 0;

    $('#responsive-menu-pro-button').click(function() {
        var offsetScrollList = $('.edge-ils-item-link:first').offset().top; 

        if ($('html').hasClass('scroll-lock')) {
            $('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  if (menuOpen==0) {
                      menuOpen = 1;
                      $('html').removeClass('scroll-lock');  
                      $('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
                      $('html').scrollTop(windowTop); //scroll to original position
                  }
                  else {   
                      menuOpen = 0;             
                  }
            });
        }
        else {                
            windowTop = $(window).scrollTop();
            offsetContainerList = $('.edge-ils-content-table').offset().top;  
            $('html').addClass('scroll-lock');      
            $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
        }      
    }); 
}); 

Video mit dem Problem, falls das hilft hier.

Ok, lassen Sie uns zuerst über das Problem sprechen:

Das Plugin wird eingestellt transform: translateX(800px); auf Ihrem Haupt-Div, aber transformieren Sie die position: fixed von allen seinen Kindern, also alle Ihre inneren Divs, die eine feste Position haben, werden im Grunde verschoben, um positionsrelativ zu sein, also werden sie im Grunde nach oben verschoben.

Die zu komplexe Lösung:

Sie können natürlich damit spielen, den Benutzer nach oben zu scrollen, seine Position zu speichern und eine wirklich komplexe Lösung zu finden, um dieses Problem zu umgehen, ABER, all dies für ein linkes Menü? Es scheint so viel Arbeit für ein einfaches festes Div zu sein, das andere feste Div nach rechts schiebt.

Die einfache Lösung:

Warum lassen wir die Transformation nicht einfach weg und verwenden margin-left?

<style>

html.responsive-menu-pro-open {
  overflow-y: hidden !important;
  padding-right: 9px;
} 

#responsive-menu-pro-container {
  position: fixed !important;
}

#responsive-menu-pro-container {
  position: fixed !important;
  transform: none !important;
  margin-left: -800px;

  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

#responsive-menu-pro-button {
  transform: none !important;
  transition: 2.6s ease !important; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1) !important; 
  transition-property: margin-left !important;
}

.responsive-menu-pro-open #responsive-menu-pro-button {
   margin-left: 800px;
}

#responsive-menu-pro-header {
  transform: none !important;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-header {
  margin-left: 800px;
}

.responsive-menu-pro-open .edge-wrapper {
  transform: none !important;
}

.responsive-menu-pro-open .edge-wrapper .edge-wrapper-inner {
  margin-left: 800px;
}

.edge-wrapper .edge-wrapper-inner {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-content .edge-ps-navigation {
  margin-left: 800px;
}

.edge-content .edge-ps-navigation {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-container {
  margin-left: 0;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-back-to-top-text {
  display: none;
}

</style>

Indem Sie das obige Snippet hinzufügen, ahmen Sie die gewünschte Funktionalität nach, ohne mithilfe von margin-left umzuwandeln.

Anmerkungen – Aufgrund Ihres Seitenlayouts (es ist ein bisschen chaotisch, viele Elemente mit fester Position, innerhalb anderer Elemente mit fester Position) müssen Sie den linken Rand auf verschiedene Elemente setzen. Eine Änderung des Seitenlayouts würde die Anwendung viel einfacher machen dies, oder verwenden Sie sogar die native Transformationsfunktion des Plugins.

Diese Lösung funktioniert möglicherweise nur auf der Beispielseite, die Sie uns gegeben haben, Sie müssen marign-left auf den richtigen Elementen auf Ihren anderen Seiten festlegen, aber wenn Sie alle Ihre Seiten in einem einzigen Wrapper-Div anordnen, enthält das die Funktionalität und entfernen Sie andere feste Elemente, können Sie ein einzelnes Code-Snippet erstellen, das auf Seiten funktioniert.

Endeffekt – Das Plugin hat aufgrund Ihres Seitenlayouts Probleme. Wenn Sie sich an die Plugin-Entwickler wenden, erhalten Sie möglicherweise eine bessere Antwort, und sie untersuchen möglicherweise Ihr spezifisches Thema und bringen eine viel bessere Lösung. Ohne Ihren Code zu sehen, ist dies die beste Problemumgehung, die ich finden konnte, ohne zu versuchen, mit Schriftrollen zu spielen.

Mir ist aufgefallen, dass die Klasse von scroll-lock wird nicht zum HTML-Element auf Ihrer Seite mit dem Namen “scroll-lock” hinzugefügt, sondern auf der Seite “ilinks-push”. Die Überprüfung, ob der HTML-Code diese Klasse hat, wird also auf Ihren Unterseiten niemals wahr. Ich habe den Code so umgeschrieben, dass er nach der aufgerufenen Inteded-Klasse sucht responsive-menu-pro-open.

Aber damit es für Ihre Unterseiten funktioniert, müssen Sie die Logik im bereitgestellten Code verstehen. Ich habe einige Änderungen vorgenommen und Kommentare hinzugefügt, um es klarer zu machen:

$(document).ready(function() {
    var windowTop = 0;

    $('#responsive-menu-pro-button').click(function() {

        /* check if there is a ils item link */
        if ( $('.edge-ils-item-link')[0] ) {
            /* save space above the element to variable */
            var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
        }

        /****** Menu gets opened ******/

        if ($('html').hasClass('responsive-menu-pro-open')) {

            /* scroll to top of page */
            windowTop = $(window).scrollTop(); 
            /* add the scroll-lock class */
            $('html').addClass('scroll-lock');
            
            /* check if there is a ils item link */
            if ( $('.edge-ils-item-link')[0] ) {
                /* add the saved space again to look like the same scroll position we started with */      
                $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); 
            }
            
        }

        /****** Menu gets closed ******/

        else { 
            $('html').removeClass('scroll-lock');

            /* check if there is a ils item link */
            if ( $('.edge-ils-item-link')[0] ) {
                /* again use the saved space to make it look like the start position */
                $('.edge-ils-content-table').css('top', -offsetScrollList +'px');
            }

            $('html').scrollTop(windowTop);
        }

    }); 
}); 

Sie sehen die Teile, wo es ist check if there is a ils item link geschrieben?

Dies sind die Teile, die sich auf Ihren Unterseiten unterscheiden.

Mit verwenden .offset().top Wir bekommen den Raum über den Elementen. Dies funktioniert nur, wenn es tatsächlich Elemente mit der Klasse von gibt .edge-ils-item-link Deshalb habe ich den Code in die if-Klauseln eingefügt.

Im Code verwenden Sie die Leerzeichen oben, um die Elemente an der richtigen Stelle zu positionieren, sodass es so aussieht, als wäre die Schriftrolle blockiert.

Um auf die richtigen Elemente abzuzielen, brauchen wir die Klasse davon.

Sie müssen also sicherstellen, dass jede Seite die gleiche Klasse um den Inhaltsbereich herum verwendet. Auf diese Weise können Sie sie auf jeder Seite ohne zusätzliche if-Klauseln im Javascript ansprechen.

Alternativ könnten Sie eine Reihe von if-Klauseln korrigieren und die Elemente auf Ihren Seiten überprüfen. In Ihrer Seite mit dem Namen “Scroll-Lock” könnte es das Element von sein info-field Mit können Sie die Leerzeichen setzen. Aber auf dieser Seite haben Sie den Inhalt mit fester Position platziert (weiß nicht warum, verwenden Sie einen ausgefallenen Blockbuilder oder so etwas? Markup sieht schrecklich aus), so dass dies Probleme verursacht, wenn Sie Ihre Klasse von hinzufügen scroll-lock mit dem position: fixed;.

Ich denke, Sie müssen den Inhalt Ihrer anderen Seiten anpassen, damit dieses Problem für Sie gelöst werden kann. Es ist keine gute Praxis, das Javascript für jede Ihrer Unterseiten mit unterschiedlichen Inhaltselementen anzupassen. Versuchen Sie, jede Unterseite in zwei Spalten zu erstellen (mit Flexbox). Vielleicht bleibt der linke immer fest und der rechte ist statisch und daher scrollbar. Wir wissen dies mit den Informationen in Ihrer Frage nicht.

Hinzufügen min-height: 100vh; zum Body-Tag. Vertikales Scrollen wird nur angezeigt, wenn der Inhalt die Höhe des Darstellungsbereichs überschreitet.

Derzeit ist die Dokumenthöhe auf Ihren Seiten auf die Gesamthöhe von relativ positionierten untergeordneten Elementen festgelegt. Siehe unten Screenshots.

In Bezug auf das, was ich gemäß dem erforderlichen Verhalten verstanden habe, denke ich, dass die Lösung einfach ist und nicht kompliziert werden muss:

Ich habe mir die Seiten und das Skriptverhalten angesehen und festgestellt, dass die Klasse Scroll-Lock wird nicht zum DOM hinzugefügt, aber ich denke, Sie können sich einfach auf den Klassennamen verlassen: Responsive-Menu-Pro-Open das nach dem Öffnen des Menüs zum HTML-Element hinzugefügt wird. Versuchen Sie also einfach, einige CSS-Eigenschaften für diese Klasse festzulegen, und ich denke, Sie können loslegen. Bitte bestätigen.

.responsive-menu-pro-open{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Hoffe, das hilft, da ich es an meinem eigenen Ende ausprobiert habe und es perfekt funktioniert hat 🙂

Der beste Weg, dieses Problem zu lösen, ist in der Tat mit dem WordPress-Plugin, das Sie verwenden, genannt Responsives Menü, mit dem Sie diese Optionen bearbeiten können. Ich verwende es auf meiner Website, Couvs Ecke. Hier sind einige Lösungen zur Fehlerbehebung:

• Stellen Sie sicher, dass das Plugin auf dem neuesten Stand ist, es wurde kürzlich aktualisiert und ist viel besser.
• Untermenüs (unter übergeordneten Kategorien verschachtelte Menüelemente) sind die besten. Verwenden Sie sie überall dort, wo es nötig ist. Passen Sie dies auf der Seite “Menüs” Ihres Admin-Dashboards an.
• Überprüfen Sie Ihr Thema. Kadenz WP ist ein guter. Spielen Sie etwas herum, b / c Ihr Thema kann einen Konflikt haben.
• Versuchen Sie, eine Website-Datenbank/Dateioptimierung auszuführen und Ihren Cache/CDN zu leeren, wenn Sie sie verwenden. Das kann Ihnen helfen, das Problem zu beheben. Hoffe das hilft. Schauen Sie sich unbedingt das Plugin an und wie ich es eingestellt habe meine Seiteum zu sehen, was Sie denken.